Team:
- Craig (User Advocate)
- Amy (Facilitator)
- Safia (Quality)
- Michael (Deployment)
What we chose
How we got there
function starsign(dob) {
const dobDay = Number(dob.split('-')[2])
const dobMonth = Number(dob.split('-')[1])
if ((dobDay >= 21 && dobMonth === 3) || (dobDay <= 19 && dobMonth === 4)) {
return "aries"
}
form.addEventListener("submit", (event) => {
const formData = new FormData(form);
const data = Object.fromEntries(formData)
const sign = starsign(data.sign)
const day = data.day
const URL = `https://aztro.sameerkumar.website/?sign=${sign}&day=${day}`;
event.preventDefault();
.then(json => {
starsignHeader.innerHTML = `Hey there, ${sign.charAt(0).toUpperCase()+sign.slice(1)}!`
description.innerHTML = `<b>${day.charAt(0).toUpperCase()+day.slice(1)} is looking like this:</b><br> ${json.description}`
moodP.innerHTML = ` ${json.mood}`
colourP.innerHTML = ` ${json.color}`
colourP.style.color = `${json.color}`
luckyTimeP.innerHTML = ` ${json.lucky_time}`
luckyNumberP.innerHTML = ` ${json.lucky_number}`
YOU ARE ENJOYING THIS PRESENTATION
==ECMAScript (ES6)==
const URL = 'https://aztro.sameerkumar.website/?sign=aries&day=today';
fetch(URL, {
method: 'POST'
})
.then(response => response.json())
.then(json => {
const date = json.current_date;
console.log(date);
});
.then(json => {
starsignHeader.innerHTML = `Hey there, ${sign.charAt(0).toUpperCase()+sign.slice(1)}!`
description.innerHTML = `<b>${day.charAt(0).toUpperCase()+day.slice(1)} is looking like this:</b><br> ${json.description}`
moodP.innerHTML = ` ${json.mood}`
colourP.innerHTML = ` ${json.color}`
colourP.style.color = `${json.color}`
luckyTimeP.innerHTML = ` ${json.lucky_time}`
luckyNumberP.innerHTML = ` ${json.lucky_number}`
We had lots of trouble accessing our chosen second API as it required a URL. The github pages URL was not acceptable, so we tried using a custom domain. That didn't work and we had trouble reverting that change (from custom domain to github url). Finally we decided to use giphy API to display an image. We felt we had a lot of text on our response and that an image would be a better fit.
We also had trouble adding our second API after we'd chosen giphy, as we weren't sure on the syntax of the URL and kept getting a 403 error. Eventually we used Postman which made us realise that we were using the wrong request method!
- The responsivity on small mobile screens could be better
- We could have made the CSS sections more clearly defined
- We could have communicated better around what we were working on before dipping out into interviews
- We had issues with deleting a previous commit... (more on this in the next slide)
- We didn't use the points system properly or effectively
Because of this last point, we learned the hard way that you should not try to 'go back in time' once things go wrong in Git/GitHub! It's often best just to commit over your previous commits rather than to remove things.
We had some issues getting stuck in the Vim editor when we did a git merge.
Change the default editor to your usual one (e.g. VS Code).
- editing your terminal config file (probably ~/.zshrc, ~/.bashrc or ~/.bash_profile)
- to add this line:
export EDITOR="code -w"
Or
- press
i(i for insert) - write your merge message
- press
esc(escape) - write
:wq(write & quit) - then press enter
==To reverse custom domain==
We had to revert custom domain changes by deleting the CNAME file. This file was in the project folder on our local repos.
==Scope==
We were trying to access the gif url and add it to a div in the response box the user would view, but we could not get it to work. It was because we were adding our code outside of the curly brackets and where the was not defined.
function gifapi(signMood){
const URL2 = `https://api.giphy.com/v1/gifs/random?api_key=pduIuGlCw67hBvjSybp6vOMcpVHE4xGu&tag=${signMood}&limit=1`;
fetch(URL2, {
method: 'GET',
headers: {"content-type": "application/json"},
})
.then(response => {
if (!response.ok) throw new Error(response.status);
return response.json()
})
.then(response => {
console.log(response.data.image_original_url)
var img = document.createElement("img");
img.style.height= `200px`
console.log(img)
img.src = response.data.image_original_url;
console.log(img.src)
giphy.appendChild(img)
}) ** we added it here by mistake **
}