DEV Community: Nkem

Day 22-25 of 100 Days of Code: Thinking Responsively

Nkem — Sat, 07 May 2022 20:10:08 +0000

I developed a 3-page responsive website using. The theme of the site is living a simple life. The site is mobile friendly using media queries and flexbox. This was a build-along project with Scrimba. You can view it here.

Day 21 of 100 Days of Code: Thinking and Coding Responsively for the Web Part 1

Nkem — Mon, 02 May 2022 17:05:00 +0000

Today I learnt about coding responsively for the web. Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, phones and other devices that could come up in the future). This included the view port, width, font-size, margins, padding, media queries, images and a basic introduction to flexbox.

Day 19 - 20 of 100 Days of Code: Dice Game App

Nkem — Wed, 27 Apr 2022 19:41:59 +0000

Today I built a dice game web app with HTML, Javascript and CSS. The dice game involves two players which could be real or arbitrary. When the player clicks roll dice, it selects a random number between 1-6 as a normal dice would. Any player whose total score is greater than or equals to 20 wins the game.

html snippet

<html>
    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <h1 id="message">Player 1 Turn</h1>
            <div class="players">
                <div id="player1">
                    <h1>Score: 
                        <span id="player1Scoreboard">0</span>
                    </h1>
                    <div id="player1Dice" class="dice active">-</div>
                </div>
                <div id="player2">
                    <h1>Score: 
                        <span id="player2Scoreboard">0</span>
                    </h1>
                    <div id="player2Dice" class="dice">-</div>
                </div>
            </div>

            <button id="rollBtn">Roll Dice 🎲</button>
            <button id="resetBtn">Reset Game 🔁</button>
        </div>
        <script src="index.js"></script>
    </body>
</html>

css

html, body { 
    --color-1: #a8e6cf;
    --color-2: black; 
    --color-3: #ffd3b6; 
    --color-4: #ffaaa5; 
    --color-5: #ff8b94;
    margin: 0;
    padding: 0;
}

body {
    padding-top: 50px;
    background-image: linear-gradient(180deg, var(--color-1) , var(--color-2));
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    color: black;
}

.container {
    width: 400px;
    text-align: center;
    margin: 0 auto;
    background-color: white;
    box-shadow: -2px 6px 18px 3px rgba(0,0,0,0.75);
    padding: 50px;
}

.players {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.dice {
    border-radius: 10px;
    width: 100px;
    height: 100px;
    background-color: var(--color-3);
    margin: 0 auto;
    font-size: 80px;
    display: block;
    align-items: center;
    justify-content: center;
}


button {
    color: #fff;
    padding: 20px 30px;
    font-size: 20px;
    margin: 40px auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#rollBtn {
    background-color: var(--color-5);
}

#resetBtn {
    background-color: var(--color-4);
}

button:focus {
    outline: none;
}

#resetBtn {
    display: none;
}

.active {
    box-shadow: -2px 6px 18px 3px rgba(0,0,0,0.75);
}

Javascript snippet

// Create variables for the game state
let player1Score = 0
let player2Score = 0
let player1Turn = true

// Create variables to store references to the necessary DOM nodes
const player1Dice = document.getElementById("player1Dice")
const player2Dice = document.getElementById("player2Dice")
const player1Scoreboard = document.getElementById("player1Scoreboard")
const player2Scoreboard = document.getElementById("player2Scoreboard")
const message = document.getElementById("message")
const rollBtn = document.getElementById("rollBtn")
const resetBtn = document.getElementById("resetBtn")

function showDisplayButton() {
    rollBtn.style.display = "none"
    resetBtn.style.display = "block"
}

/* Hook up a click event listener to the Roll Dice Button. */
 rollBtn.addEventListener("click", function() {
    const randomNumber = Math.floor(Math.random() * 6) + 1

    if (player1Turn) {
        player1Score += randomNumber
        player1Scoreboard.textContent = player1Score
        player1Dice.textContent = randomNumber
        player1Dice.classList.remove("active")
        player2Dice.classList.add("active")
        message.textContent = "Player 2 Turn"
    } else {
        player2Score += randomNumber
        player2Scoreboard.textContent = player2Score
        player2Dice.textContent = randomNumber
        player2Dice.classList.remove("active")
        player1Dice.classList.add("active")
        message.textContent = "Player 1 Turn"
    }


    if (player1Score >= 20) {
        message.textContent = "Player 1 has won! 🥳"
        showDisplayButton()
    } else if (player2Score >= 20) {
        message.textContent = "Player 2 has won! 🎉"
        showDisplayButton()
    }

    player1Turn = !player1Turn
})

// 1. Hook a click event listener up with the Reset Button
// 2. Create a reset() function that resets the game
// 3. Invoke the reset() function when the Reset Button is clicked

resetBtn.addEventListener("click", function(){
    reset()
})

function reset() {
    message.textContent = "Player 1 Turn"
    player1Scoreboard.textContent = 0
    player2Scoreboard.textContent = 0
    player1Dice.textContent = '-'
    player2Dice.textContent = '-'
    player1Score = 0
    player2Score = 0
    player1Turn = true
    resetBtn.style.display = "none"
    rollBtn.style.display = "block"
    player2Dice.classList.remove("active")
    player1Dice.classList.add("active")
}

You can view the app here

Day 18 of 100 Days of Code

Nkem — Mon, 25 Apr 2022 19:43:14 +0000

Today I learnt how to build a carousel using HTML, Javascript and CSS. A carousel is a container (slideshow) of images or info that users can select by clicking a button that directs them forward or backward in the slideshow.
HTML

<html>
    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body class="container">
        <div class="carousel">
            <div class="carousel-item carousel-item-visible">
                <img src="images/1.jpg" />
            </div>
            <div class="carousel-item">
                <img src="images/2.jpg" />
            </div>
            <div class="carousel-item">
                <img src="images/3.jpg" />
            </div>

            <div class="carousel-actions">
                <button id="carousel-button-prev" aria-label="Previous Slidex"><</button>
                <button id="carousel-button-next" aria-label="Next Slide">></button>
            </div>
        </div>

        <script src="index.js"></script>
    </body>
</html>

CSS


body{
    margin:0;
    background-color: rgba(77, 66, 71, 0.21);

}
.container{
    display:flex;

    align-items:center;
    justify-content: center;
}
.carousel {
    max-width: 600px;
    position: relative;

}

.carousel .carousel-item,
.carousel .carousel-item-hidden {
    display: none;
}

.carousel .carousel-item-visible {
    display: block;
    animation: fadeVisibility 0.5s;
}

.carousel .carousel-item img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.carousel .carousel-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel .carousel-actions button {
    border-radius: 50px;
    background-color: white;
    border: 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.carousel .carousel-actions button#carousel-button-prev {
    margin-left: 20px;
}

.carousel .carousel-actions button#carousel-button-next {
    margin-right: 20px;   
}

@keyframes fadeVisibility {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Javascript

const slides = document.getElementsByClassName('carousel-item');
let slidePosition = 0;
const totalSlides = slides.length;

document.getElementById('carousel-button-next').addEventListener('click', moveToNextSlide);
document.getElementById('carousel-button-prev').addEventListener('click', moveToPrevSlide);

function hideAllSlides() {
    for (let slide of slides) {
        slide.classList.remove('carousel-item-visible');
        slide.classList.add('carousel-item-hidden');
    }
}

function moveToNextSlide() {
    hideAllSlides();

    if (slidePosition === totalSlides - 1) {
        slidePosition = 0;
    } else {
        slidePosition++;
    }

    slides[slidePosition].classList.add("carousel-item-visible");
}

function moveToPrevSlide() {
    hideAllSlides();

    if (slidePosition === 0) {
        slidePosition = totalSlides - 1;
    } else {
        slidePosition--;
    }

    slides[slidePosition].classList.add("carousel-item-visible");
}

Day 17 of 100 Days of Code

Nkem — Sun, 24 Apr 2022 20:44:22 +0000

As I stated earlier in the series, I am using the Scrimba curriculum. I studied more on CSS; Specificity, Compound Selectors, inheritance and applying them.

Day 15-16 of 100 days of Code

Nkem — Fri, 22 Apr 2022 20:06:04 +0000

I have been a lot slower than I wanted. I will do better. I created the invoice creator app with HTML, Javascript and CSS.
The invoice creator app adds tasks such as washing car, mowing lawn and pullling weeds with its price attached to the button as you click it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="invoice.css" rel="stylesheet">
    <title>Invoice Creator App</title>
</head>
<body>

        <header>
            <h2>Invoice Creator</h2>
            <p class="heading">Thanks for choosing Dynax Solutions, LLC!</p>
        </header>

        <section>
            <div class ="invoicebtns ">
                <button class="button" id="billwash">Wash Car: $10</button>
                <button class="button" id ="mow">Mow Lawn: $20</button>
                <button class="button" id ="billpull">Pull Weeds: $30</button>
            </div>
        </section>
      <section>
          <div class="task">
              <p>TASK</p>
              <p>TOTAL</p>
          </div>
          <div class ="bill">
              <p id ="washCar"></p>
              <p id ="washCarPrice"></p>
          </div>
          <div class ="bill">
            <p id ="mowLawn"></p>
            <p id ="mowLawnPrice"></p>
          </div>
          <div class ="bill">
            <p id ="pullWeeds"></p>
            <p id ="pullWeedsPrice"></p>
          </div>
          <div class ="bar"></div>

      <div class="task">
        <p>NOTES</p>
        <p>TOTAL  AMOUNT</p>
    </div>
    <div class="task">
        <p id ="typeofcollection"></p>
        <p id="totalamount"><b>$0</b></p>
    </div>
    <button class="sendbtn"><i class="fa fa-envelope" aria-hidden="true"></i> Send Invoice</button>
    </section> 

    <script src ="invoice.js"></script>
</body>
</html>

CSS snippet

html,
body {
  margin: 0;
  padding: 0;


  color: black;
  font-family: Georgia, "Times New Roman", Times, serif;

  font-size: 16px;
}

header{
  background-color:#D5D4D8 ;

  text-align: center;
}
h2{
  margin-top:0;
  margin-bottom:1%;

  font-size: 50px;
  padding:50px 0 10px 0;
}
.heading
{

    font-size: 30px;
    padding-bottom:20px;
}
.invoicebtns
{   margin-top:12%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;

}
.button {
    background-color: #FFFFFF; /* white */
    border: 1px solid #D5D4D8;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;

    font-size: 16px;
    border-radius:12px;
  }
  .button:hover {
    background-color: #D5D4D8;
  }
    section{
        margin-left: 10%;
        width:80%;
    }

  .task{
      margin-top: 2%;
      display:flex;

    color:darkgrey;


    justify-content: space-between;

    font-size: larger;
  }
  .bill
  {
      margin-top:1%;
      display:flex;
      color:black;

      justify-content: space-between;
    font-weight: bold;

  }
  .bar{


      border-top: 1px solid  #D5D4D8;
  }
 .sendbtn{
    background-color: #3770ED; /* blue*/
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 4%;
    width:90%;
 }

Javascript Snippet

// This is for the object creation of the invoice
let invoice =[
    { 
        task:"Wash Car",
        bill: 10
    },
    {
        task: "Mow Lawn",
        bill: 20
    },
    {
        task: "Pull Weeds",
        bill:30
    }
]
let totalbill =[]
//fetching the value from the buton using addeventlistener
const carBtn = document.getElementById('billwash')
let  mowBtn = document.getElementById('mow')
const pullBtn = document.getElementById('billpull')
let washCar =document.getElementById('washCar')
let washCarPrice =document.getElementById('washCarPrice')
let mowLawn =document.getElementById('mowLawn')
let mowLawnPrice =document.getElementById('mowLawnPrice')
let totalamount =document.getElementById('totalamount')

let pullWeeds=document.getElementById('pullWeeds')
let pullWeedsPrice =document.getElementById('pullWeedsPrice')


 carBtn.addEventListener("click",function(){
     totalbill.push(invoice[0].bill)
     washCar.innerHTML =invoice[0].task
     washCarPrice.innerHTML =`$${invoice[0].bill}`
     carBtn.disabled =true
     totalnotes()

})

mowBtn.addEventListener("click", function(){
    totalbill.push(invoice[1].bill)
    mowLawn.innerHTML =invoice[1].task
    mowLawnPrice.innerHTML =`$${invoice[1].bill}`
    mowBtn.disabled=true
    totalnotes()
})

pullBtn .addEventListener("click",function(){
    totalbill.push(invoice[2].bill)
    pullWeeds.innerHTML =invoice[2].task
    pullWeedsPrice.innerHTML =`$${invoice[2].bill}`
    pullBtn.disabled =true
    totalnotes()
})
function totalnotes(){
    let sum = 0;

    for (let i = 0; i < totalbill.length; i++) {
     sum += totalbill[i];
     totalamount.textContent=`$${sum}`;

}
}

Day 14 of 100 Days of Code

Nkem — Sat, 26 Mar 2022 21:28:33 +0000

This is the final part of the chrome extension build along. The concepts I learnt were

Const
addEventListener()
innerHtml
inputvalue
function parameters
Template Strings
Local Storage
JSON objects (JSON.Stringify & JSON.Parse)
Objects in arrays

In the part 2, the extension did not have local storage so it was not persistent after the browser was closed. That means when the browser is closed, whatever data is put in the chrome extension would be gone. Hence the essence of the local storage.
The HTML page two more buttons added to it. The Save tab and the Delete Button. The Save button saves the value in the text box into the local storage. The SaveTab button retrieves URL into the textbox while the Delete button is for clearing the values in the box and the local storage. Below is the HTML snippet.

<html>
    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <input type="text" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <button id="tab-btn">SAVE TAB</button>
        <button id="delete-btn">DELETE ALL</button>
        <ul id="ul-el">
        </ul>
        <script src="index.js"></script>
    </body>
</html>

Javascript code

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") )
const tabBtn = document.getElementById("tab-btn")

if (leadsFromLocalStorage) {
    myLeads = leadsFromLocalStorage
    render(myLeads)
}

tabBtn.addEventListener("click", function(){    
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        myLeads.push(tabs[0].url)
        localStorage.setItem("myLeads", JSON.stringify(myLeads) )
        render(myLeads)
    })
})

function render(leads) {
    let listItems = ""
    for (let i = 0; i < leads.length; i++) {
        listItems += `
            <li>
                <a target='_blank' href='${leads[i]}'>
                    ${leads[i]}
                </a>
            </li>
        `
    }
    ulEl.innerHTML = listItems
}

Day 13 of 100 Days of Code

Nkem — Sat, 19 Mar 2022 22:45:27 +0000

Today I developed a chrome extension that inputs the URL of a page that could be used to contact the lead(s) in the future. This was a code-along project.
HTML

     <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <input type="text" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <ul id="ul-el">
        </ul>
        <script src="index.js"></script>
    </body>

CSS

body {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;
}

input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #5f9341;
    margin-bottom: 4px;
}

button {
    background: #5f9341;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
}

ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

li {
    margin-top: 5px;
}

a {
    color: #5f9341;
}

The Javascript

// chrome://extensions/
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", function() {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    renderLeads()
})

function renderLeads() {
    let listItems = ""
    for (let i = 0; i < myLeads.length; i++) {
        listItems += `
            <li>
                <a target='_blank' href='${myLeads[i]}'>
                    ${myLeads[i]}
                </a>
            </li>
        `
    }
    ulEl.innerHTML = listItems  
}

The JSON script

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Leads Sales tracker",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    }
}

10-12 of 100 Days of Code

Nkem — Wed, 16 Mar 2022 21:59:16 +0000

I developed a static website about a mushroom company. I used html and CSS.

Day 9 of 100 days of Code

Nkem — Tue, 08 Mar 2022 23:42:18 +0000

Started the build-along chrome extension app with Scrimba. In the course of the build-along, I learnt about the innerHtml and using the click function apart from using the onclick function in the button. I will continue tomorrow.

Day 8 of 100 Days of Code

Nkem — Mon, 07 Mar 2022 20:30:30 +0000

Went AWOL for a while. I developed a random password generator app. Learnt a little of flexbox with it. I have learnt something with this absence. It is better to do a little than none at all. At least you can build from there.

The random password generator is an app that when the button is clicked, it generates four different passwords into four textboxes.

The html code

<title>Password Generator</title>
</head>
<body>
    <main>

<h1 class="generator-color">Generate a </h1>
<h1 class="generator-color2">random password</h1>
<p class="thirdgen">Never use insecure password again</p>


      <form>
       <button class ="greenbutton" type="button" onclick="genPassword()" >Generate Passwords</button> 
       <div class ="pwds">
       <input type="text" id="pass1" readonly> 
       <input type="text" id="pass2" readonly> 
       <input type="text" id="pass3" readonly> 
       <input type="text" id="pass4" readonly> 
      </div>
      </form>


</main>
    <script src="passwordgen.js"></script>
</body>

The CSS file

body{
    margin:0;
    padding:0;
    background-color: #1F2937;
    width: 100%;
    font-family: "Goudy Bookletter 1911", sans-serif;

}
main{
    margin-left:6%;
    margin-top: 10%;
}
h1{
    font-size: 30px;
}
.generator-color{
    color:#FFFFFF
}
.generator-color2{
    color:#10B981;
}
.thirdgen{
    color:#D5D4D8;
    font-size: 20px;
    line-height: 28px;


}
.greenbutton{
   background-color: #10B981;
  border: none;
  border-radius: 5px;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  margin-bottom: 5rem;;
  cursor: pointer;

}
.pwds
{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:50%;

}
input{
    padding:5px;
    background-color: #273549;
    color:#10B981;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 10px;
    padding: 10px;
    border-style: none;
    border-radius: 25px;

}

The Javascript file

let password1=document.getElementById("pass1");
let password2=document.getElementById("pass2");
let password3=document.getElementById("pass3");
let password4=document.getElementById("pass4");

 function genPassword() {
    let chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let passwordLength = 12;
    let password1 = "";
    let password2 = "";
    let password3 = "";
    let password4 = "";


 for ( i = 0; i <= passwordLength; i++) {
   let randomNumber1 = Math.floor(Math.random() * chars.length);
   let randomNumber2 = Math.floor(Math.random() * chars.length);
   let randomNumber3 = Math.floor(Math.random() * chars.length);
   let randomNumber4 = Math.floor(Math.random() * chars.length);
   password1+= chars.substring(randomNumber1, randomNumber1 +1);
   password2+= chars.substring(randomNumber2, randomNumber2 +1);
   password3+= chars.substring(randomNumber3, randomNumber3 +1);
   password4+= chars.substring(randomNumber4, randomNumber4+1);
   if (password1 != password2 && password1 != password3 && password2!=password3 && password3!=password4){
      document.getElementById("pass2").value = password2;
      document.getElementById("pass3").value = password3;
      document.getElementById("pass4").value = password4;
   }

  }
        document.getElementById("pass1").value = password1;


 }

Day 7 of 100 Days of Code

Nkem — Fri, 25 Feb 2022 20:56:35 +0000

Today I started a html,CSS project to escape tutorial hell as we would say. Let me see how it goes. Let me use what I have learnt and go from there.