day-two.md

Day "Two" (in which I admit defeat)

So this is the moment when I do the inevitable and admit that aiming to make these entries daily was wildly, wildly optimistic. It has been many more days than two days (I am purposefully not counting) but I will leave this title as a token of my ridiculous over-estimation of my own capabilities. I blame self-portraiture for that. I managed to bash out a self-portrait a day every day for a whole year. But I suppose the thing about portraits is that they don't actually break if they're a bit shit. You can just say "oh well, it's a bit shit but it's done', it's a bit harder to do that with code. Not that I'm not doing that exact thing right now - that is exactly what I am doing but just after a week rather than a day.

What I have actually tried to make is little quiz game based on common interview questions (and it's about as fun as it sounds). It consumes the words API for one of the questions and then uses a few code wars style string functions for the others. It is still not finished but I am going to make a Python database of code concepts (db- Things I Should Know) and then come back to it in a little while when I am itching for some Vanilla JS action and I will do those last few bits and bobs that will make it work as an actual game with scoring and winning and losing and all that.

Interview Question Questions

Overview

Test yourself here: https://lily-la-day.github.io/day-two/

How to Use

• Click next to randomly generate a question
• Answer the question
• Click next!

Technologies Used : HTML5/CSS3/Vanilla JS

The Process

Overview

There are three possible question types generated - write string in reverse, count the vowels and put the word types in order.

Questions are then created as the result of two random choice functions, one that selects the "question type" from array of the corresponding functions and one that selects the "interview question" from an array of strings.

const makeQuestion = () => {

const sentence = questions[Math.floor(Math.random() * questions.length -1)]
next.addEventListener('click', getQuestion(sentence))

}

The Questions

Two of the three possible question types - reverse and count vowels were very simple to implement. It was just a matter of writing the corresponding function and then matching the returned value with the user input.

For the third though I wanted to challenge myself and ensure that I learned something new so decided to use the totally unfamiliar drag and drop event listener system to capture the users input.

Having failed to use the Words API successfully on "Day One" (cough cough - definitely not a day) I decided to have another go here (see here for API info and documentation: https://www.wordsapi.com/docs/).

This question requires users to look at a sentence and a corresponding list of "parts of speech" (noun, verb, adjective etc) that are in a scrambled order and put them into the correct order to match the order of the sentence.

In order to achieve this I made an AJAX request to get the part of speech before the creation of the divs then as part of the promise then block create the divs creating the word types.

wordTypes = sentence.trim().split(' ').map(word => {

      axios.get(`https://wordsapiv1.p.mashape.com/words/${word}`,  {

        headers: { 'X-Mashape-Key': token}
      })
        .then((res) => {
          let type = ''
          if (!res.data.results ) type = 'pronoun'
          else  type = res.data.results[0].partOfSpeech
          if (word === 'why'){

            type = 'adverb'

          }
          if (word === 'do'){

            type = 'adverb'

          }
            makeDiv(type)
        })

        .catch((err => console.log(err)))

    })
    
    ```
    
    
    

   TBC. (That's to be continued, not confirmed)