Forem: Hari Ram

Creating a simple carousel using JavaScript

Hari Ram — Fri, 12 Mar 2021 12:07:34 +0000

Hi Developers, In this post, I'm going to show you how to create a simple carousel using Vanilla JavaScript.

It'll be like this,

It's live on Github. Check it out here.

HTML

<main>
  <button id="prev">&lt;</button>
  <div class="card-container"></div>
  <button id="next">&gt;</button>
</main>

HTML is really simple here. We've got a main. Inside main, we've got three elements. One is the actual container card-container that is going to hold cards and the other two are buttons, #next and #prev.

Card Container

As I said, cards will be inside the card container. In my site, I used JavaScript to generate cards using an object.

You can check my code here.

A card looks like this,

<div class="card view">
  <div class="card-image">
    <img src="./designs/todo.png" alt="TODO App">
  </div>
  <a href="https://hariramjp777.github.io/frontend-todo-app/" target="_blank">TODO App</a>
</div>

A card contains a card-image that holds an image and an anchor a for the link.

In a card .view class denotes that it is the current card that is being shown on screen.

Here's my simplified CSS for the card.

.card {
  /* other
     styles */
  opacity: 0;
  pointer-events: none;
}

.card.view { /* when the card contains .view */
  opacity: 1;
  pointer-events: all;
}

The above code block says the card is hidden. It'll be visible only when the class .view is applied.

We've applied .view manually for the first card (as shown above).

That's HTML and CSS. Now we start playing with JavaScript.

JavaScript

First, We're going to select two buttons.

const prev = document.getElementById("prev");
const next = document.getElementById("next");

Concept

Say the user clicks the next button, what we should do?

You guessed it. We have to hide the current card and show the next card. If there's no next card, show the first card.

Same with the prev button, we've to show the previous card. If there's no previous card, show the last card.

In a simpler way,

if prev is clicked
    Find the current card.
    Check if there is a previous card.
    If there, Save the card in a variable called prevCard.
    If not, Save the last card instead.
    Hide the current card i.e. Remove the class ` .view `
    Show the prevCard i.e. Add the class ` .view `

Methods we're going to use in JavaScript

Methods	Explanation
`.previousElementSibling`	returns the previous element.
`.nextElementSibling`	returns the next element.
`.firstElementChild`	returns the first element (child) of a parent.
`.lastElementChild`	returns the last element (child) of a parent.

In code, It'll be,

prev.addEventListener("click", function () {
  /* Find the current card */
  const currCard = document.querySelector(".card.view");
  /* Set the prevCard based on its availability */
  const prevCard = currCard.previousElementSibling
      ? currCard.previousElementSibling
      : document.querySelector(".card- 
  container").lastElementChild;
  currCard.classList.remove("view");
  prevCard.classList.add("view");
});

next.addEventListener("click", function () {
  /* Find the current card */
  const currCard = document.querySelector(".card.view");
  /* Set the nextCard based on its availability */
  const nextCard = currCard.nextElementSibling
      ? currCard.nextElementSibling
      : document.querySelector(".card- 
  container").firstElementChild;
  currCard.classList.remove("view");
  nextCard.classList.add("view");
});

In the second step of both code blocks, I mean setting the card that's going to be displayed, I used the ternary operator, which is an abbreviated way of writing if-else statements.

Let's take an example, In this line of code,

const nextCard = currCard.nextElementSibling
    ? currCard.nextElementSibling
    : document.querySelector(".card- 
container").firstElementChild;

currCard.nextElementSibling returns the next element of current card (currCard). If it doesn't find any next element, it returns undefined which is a falsy value in JavaScript.

We're going to use this. If true i.e., we're getting a valid element, set it. Else i.e., we're getting a false value that is undefined, set the first element as the next card.

To get the first element, we can use .firstElementChild.
So, document.querySelector(".card- container").firstElementChild will return the first child of .card-container.

That's it. We've got a carousel using Vanilla JavaScript.

Feel free the check the live version here.

If you want to check the code, Here's my repository.

TODO APP using HTML, CSS and JS - Local Storage [Interactivity - JavaScript]

Hari Ram — Tue, 19 Jan 2021 18:01:34 +0000

Hello developers, This is the continuation of my previous post on TODO APP Design where I covered the design part (HTML and CSS).

Here, In this post, We're going to give interactivity to our page using Vanilla JavaScript.

Here's a gif of what we're going to make.

Here's live URL and repository

Local Storage

Local storage is a place where we can store data locally within the user's browser.

Click F12 and It'll open developer tools and you'll find local storage section in Application tab.

Data should be stored in local storage in key : value pairs.

Local storage can only store strings. Strings are the series of characters enclosed in quotes.

Ex. "Hello", "1", "true", "false".

Set and Get

Methods available in localStorage to set and get items,

setItem(key, value)

setItem takes two arguments key and value which updates the value associated with the key. If the key doesn't exist, it'll create a new one.

Say,

localStorage.setItem("name", "Dev");

key	Value
name	Dev

If you want to update something, say you want to change the name to "David",

localStorage.setItem("name", "David");

key	Value
name	David

getItem(key)

getItem takes an argument key which returns the value associated with the key.

Say if you want to get the value of key name,

localStorage.getItem("name"); // returns 'David'

clear()

If you want to clear all data in the localStorage, Use clear() method.

localStorage.clear(); // clear all

How's ours?

In our case i.e. TODO App, we need to store,

an actual TODO
a boolean to indicate whether the todo is completed or not.

A better way of storing this is by using Javascript object.


/* Data model */

{
  item: "To complete javascript",
  isCompleted: false
}

We need to store a lot of TODOS. So, we can use array of objects. Here is the model,

const todos = [
  {
    item: "To complete JavaScript",
    isCompleted: false
  },
  {
    item: "Meditation",
    isCompleted: true
  }
]

As I said earlier, localStorage only stores String. To store an array of objects, we need to convert it into string.

Using JSON methods,

stringify(arr)

stringify takes an single argument and converts it into string.


localStorage.setItem("todos", JSON.stringify(todos));

Data table looks like this,

parse(str)

If you get todos from localStorage, it'll return a string.

Say,


localStorage.getItem("todos"); // returns a string

You'll get,

"[{"item":"To complete Javascript","isCompleted":false},{"item":"Meditation","isCompleted":true}]"

To work on that, we need to convert it back. To do so, we use parse.

parse takes a string and convert it back to an array.

JSON.parse(localStorage.getItem("todos")); // returns an array.

Get all TODOS when page loads

When user loads page, we need to get all todos from localStorage and render them.

We're going to render a card (todo) like this,

<li class="card">
  <div class="cb-container">
    <input type="checkbox" class="cb-input" />
    <span class="check"></span>
  </div>
  <p class="item">Complete online Javascript course</p>
  <button class="clear">
    <img src="./assets/images/icon-cross.svg" alt="Clear it" />
  </button>
</li>

But using javascript, here we go,

addTodo()

function addTodo() {
  // code
}

code

First we need to check whether todos exist, if not return null.

if (!todos) {
    return null;
}

If exists, select #itemsleft which says number of items uncompleted.

const itemsLeft = document.getElementById("items-left");

and

run forEach on them and create card and initialize listeners.


// forEach

todos.forEach(function (todo) {

 // create necessary elements

  const card = document.createElement("li");
  const cbContainer = document.createElement("div");
  const cbInput = document.createElement("input");
  const check = document.createElement("span");
  const item = document.createElement("p");
  const button = document.createElement("button");
  const img = document.createElement("img");

  // Add classes

  card.classList.add("card");
  button.classList.add("clear");
  cbContainer.classList.add("cb-container");
  cbInput.classList.add("cb-input");
  item.classList.add("item");
  check.classList.add("check");
  button.classList.add("clear");

  // Set attributes

  card.setAttribute("draggable", true);
  img.setAttribute("src", "./assets/images/icon-cross.svg");
  img.setAttribute("alt", "Clear it");
  cbInput.setAttribute("type", "checkbox");

  // set todo item for card

  item.textContent = todo.item;

  // if completed -> add respective class / attribute

  if (todo.isCompleted) {
    card.classList.add("checked");
    cbInput.setAttribute("checked", "checked");
  }

  // Add click listener to checkbox - (checked or unchecked)

  cbInput.addEventListener("click", function () {
    const correspondingCard = this.parentElement.parentElement;
    const checked = this.checked;
    // state todos in localstorage i.e. stateTodo(index, boolean)
    stateTodo(
      [...document.querySelectorAll(".todos .card")].indexOf(
        correspondingCard
      ),
      checked
    );
    // update class
    checked
      ? correspondingCard.classList.add("checked")
      : correspondingCard.classList.remove("checked");
    // update itemsLeft
    itemsLeft.textContent = document.querySelectorAll(
      ".todos .card:not(.checked)"
    ).length;
  });

  // Add click listener to clear button - Delete

  button.addEventListener("click", function () {
    const correspondingCard = this.parentElement;
    // add class for Animation
    correspondingCard.classList.add("fall");
    // remove todo in localStorage i.e. removeTodo(index)
    removeTodo(
      [...document.querySelectorAll(".todos .card")].indexOf(
        correspondingCard
      )
    );
    // update itemsLeft and remove card from DOM after animation 
    correspondingCard.addEventListener("animationend", function(){
      setTimeout(function () {
        correspondingCard.remove();
        itemsLeft.textContent = document.querySelectorAll(
          ".todos .card:not(.checked)"
        ).length;
      }, 100);
    });
  });

  // parent.appendChild(child)

  button.appendChild(img);
  cbContainer.appendChild(cbInput);
  cbContainer.appendChild(check);
  card.appendChild(cbContainer);
  card.appendChild(item);
  card.appendChild(button);
  document.querySelector(".todos").appendChild(card);
});

and finally update #items-left on start

// Update itemsLeft
itemsLeft.textContent = document.querySelectorAll(
  ".todos .card:not(.checked)"
).length;

Spread operator `[...]`

We're using [...] in our code and it is called spread syntax.

Actually .querySelectorAll() returns NodeList on which we can't run array methods.

To update/delete data in localStorage, removeTodo and stateTodo needs index.

So, we should convert it into an array and run indexOf() to get the index of a card.

[...document.querySelectorAll(".todos .card")] returns an array and we can run array methods on it.

`stateTodo`

function stateTodo(index, completed) {
  const todos = JSON.parse(localStorage.getItem("todos"));
  todos[index].isCompleted = completed;
  localStorage.setItem("todos", JSON.stringify(todos));
}

In this code block,

Getting todos from localStorage.
Update isCompleted based on the completed boolean argument and index.
Set todos back to localStorage.

`removeTodo`

function removeTodo(index) {
  const todos = JSON.parse(localStorage.getItem("todos"));
  todos.splice(index, 1);
  localStorage.setItem("todos", JSON.stringify(todos));
}

In this code block,

Getting todos from localStorage.
Using splice method to delete a particular todo with index.
Setting todos back to localStorage.

When user adds new Todo

Above code renders todo only when page loads. But we should make it to render live when user adds new Todo using input field.

We need to select DOM first,

const add = document.getElementById("add-btn");
const txtInput = document.querySelector(".txt-input");

Add click listener to button,

add.addEventListener("click", function () {
  const item = txtInput.value.trim(); // del trial and lead space
  if (item) {
    txtInput.value = "";
    const todos = !localStorage.getItem("todos")
      ? []
      : JSON.parse(localStorage.getItem("todos"));
    const currentTodo = {
      item,
      isCompleted: false,
    };
    addTodo([currentTodo]); // add Todo to DOM
    todos.push(currentTodo); // push todo to localStorage
    localStorage.setItem("todos", JSON.stringify(todos));
  }
  txtInput.focus();
});

addTodo([currentTodo])

Instead of writing new function to render todos live on input, just we can make a small change to our existing function addTodo().

we can make use of default arguments.

function addTodo(todos = JSON.parse(localStorage.getItem("todos"))){
  // code
}

This means by default, todos equals array in localStorage if no arguments provided. (Used at start when page loads)

When it is user action, we provide arguments like we did, addTodo([currentTodo]).

currentTodo is an object but addTodo requires an array in order to run forEach.

So, [currentTodo] will help us i.e., create a new array and push object currentTodo onto it.

That's it

Now we create a main function and call addTodo() from the main.

function main(){
  addTodo(); // add all todos, here no arguments i.e., load all

  // add todo on user input  

  const add = document.getElementById("add-btn");
  const txtInput = document.querySelector(".txt-input");
  add.addEventListener("click", function () {
    const item = txtInput.value.trim();
    if (item) {
      txtInput.value = "";
      const todos = !localStorage.getItem("todos")
        ? []
        : JSON.parse(localStorage.getItem("todos"));
      const currentTodo = {
        item,
        isCompleted: false,
      };
      addTodo([currentTodo]); // with an argument i.e. add current
      todos.push(currentTodo);
      localStorage.setItem("todos", JSON.stringify(todos));
    }
    txtInput.focus();
  });
}

Now call `main` when our page loads completely

document.addEventListener("DOMContentLoaded", main);

DOMContentLoaded fires when our page (HTML DOM) loads completely.

If the event fires, it'll call main function which then handles the rest.

That's it for this post guys. If you've trouble understanding here, you can check out my repository.

If you've any questions, you can leave them in the comments or feel free to message me.

👍

TODO APP using HTML, CSS and JS - Local Storage [Design - HTML and CSS]

Hari Ram — Sun, 17 Jan 2021 19:07:49 +0000

Hello developers, I've created a TODO app only using frontend technologies (HTML, CSS and JS). It is a challenge from the website called Frontend Mentor.

If you want to look at my solution, Here is my live site URL and Github Repository.

Here, In this blog, I'm going to share with you how I did this.

Design

Here is the design file,

Boilerplate

First thing we should do is set up our project with HTML Boilerplate.

Here's mine,

<!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" />
    <meta name="author" content="Your Name" />
    <title>Frontend Mentor | TODO APP</title>
    <meta
      name="description"
      content="This is a front-end coding challenge - TODO APP"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
  </body>
</html>

Set up colors and fonts

Next, we set up our colors, fonts that we're going to use using css custom properties.

:root {
  --ff-sans: "Josefin Sans", sans-serif;
  --base-font: 1.6rem;
  --fw-normal: 400;
  --fw-bold: 700;
  --img-bg: url("../assets/images/bg-desktop-dark.jpg");
  --clr-primary: hsl(0, 0%, 98%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-page-bg: hsl(235, 21%, 11%);
  --clr-card-bg: hsl(235, 24%, 19%);
  --clr-blue: hsl(220, 98%, 61%);
  --clr-green: hsl(192, 100%, 67%);
  --clr-pink: hsl(280, 87%, 65%);
  --clr-gb-1: hsl(236, 33%, 92%);
  --clr-gb-2: hsl(234, 39%, 75%);
  --clr-gb-3: hsl(234, 11%, 52%);
  --clr-gb-4: hsl(237, 12%, 36%);
  --clr-gb-5: hsl(233, 14%, 35%);
  --clr-gb-6: hsl(235, 19%, 24%);
  --clr-box-shadow: hsl(0, 0%, 0%, 0.1);
}

Custom properties in CSS are like variables. Variable name (Identifier) should be prefixed with --

We can use these variables defined here later in our code using var() function.

So, var(--fw-normal) returns 400.

Get rid of default css - Using css resets

Every browser has a default style sheet called User Agent Stylesheet from which we get some styles for our headings, paragraphs and other elements.

But, It's better to start from scratch. So, Our css resets will be,

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  position: relative;
}

html,
body {
  min-height: 100%;
}

ul {
  list-style: none;
}

img {
  user-select: none;
}

In the above code block,

We're setting margin, padding for all elements to be 0.
Our box-sizing will be border-box which basically lets us get rid of overflow error.
We're setting our base font-size to 62.5% i.e. 10px which makes our rem calculation easier.

1rem = 1 * base-font-size (base-font-size is 16px by default)
     = 1 * 16px 
     = 16px 

We're setting base to 10px. So,

1rem   = 10px
1.5rem = 15px
2.5rem = 25px
4.6rem = 46px

[Calculation is super easy here]

Our page's height will be minimum 100%.
We're disabling bullets for unordered list.
We're using user-select: none to prevent user from selecting images i.e. when user presses Ctrl + A

Background

When we look the above design, first thing we can see clearly is backgrounds.

Yes! we need to add background-image and background-color.

body {
  font: var(--fw-normal) var(--base-font) var(--ff-sans);
  background: var(--clr-page-bg) var(--img-bg) no-repeat 0% 0% / 100vw 30rem;
  padding-top: 8rem;
  width: min(85%, 54rem);
  margin: auto;
}

Here, In this code block,

font
- font is a shorthand property for <font-weight> <font-size> <font-family>
- So, our font will be 400 1.6rem "Josefin Sans", sans-serif.
background
- background is a shorthand property for <background-color> <background-image> <background-repeat> <background-position> / <background-size>.
- background-color and background-image defines color and image.
- background-repeat defines whether the background image needs to be repeated or not. In our case, not, so no-repeat.
- background-position specifies the position of image. 0% 0% means top left which is default.
- background-size defines the size of our background.
  - Syntax here as follows: <width> <height>
width
- Setting width using min() function.
- min() function returns minimum value of its arguments.
- min(85%, 54rem)
  - In mobile devices, 85% will be body's width, but for desktop devices, 54rem will be body's width.
padding
- If you see the design file, there is some space at the top. So we're using padding-top to get that space.
margin: auto to center the body.

After we add background to our page, It looks like,

HTML

Next step is writing HTML Content.

We're going to use three semantic elements header, main and footer.

header

<header class="card">
  <h1>TODO</h1>
  <button id="theme-switcher">
    <img src="./assets/images/icon-sun.svg" alt="Change color theme" />
  </button>
</header>

main

<main>
  <div class="card add">
    <div class="cb-container">
      <button id="add-btn">+</button>
    </div>
    <div class="txt-container">
      <input
        type="text"
        class="txt-input"
        placeholder="Create a new todo..."
        spellcheck="false"
        autocomplete="off"
      />
    </div>
  </div>
  <ul class="todos"></ul>
  <div class="card stat">
    <p class="corner"><span id="items-left">0</span> items left</p>
    <div class="filter">
      <button id="all" class="on">All</button>
      <button id="active">Active</button>
      <button id="completed">Completed</button>
    </div>
    <div class="corner">
      <button id="clear-completed">Clear Completed</button>
    </div>
  </div>
</main>

footer

<footer>
  <p>Drag and drop to reorder list</p>
</footer>

Don't worry about HTML, We're going to discuss each and every line. 👍

Some more resets

In the above code blocks, we've used input and button elements. We can have some resets for them,

input,
button {
  font: inherit; /* by default input elements won't inherit font 
                    from its parent */
  border: 0;
  background: transparent;
}

input:focus,
button:focus {
  outline: 0;
}

button {
  display: flex;
  user-select: none;
}

In the above code blocks, I've used display: flex; for button since we're including img inside button in markup.

without `display: flex`	with `display: flex`

Hope you can see the different between two images.

Approach

If you look at the design file that I've included in the top of this post, you may get lot of ideas to replicate the same in browser.

One thing I got, We're going to assume all as cards. Each card may contain one or more items.

If you take header,

It contains two, one is heading h1 and on the other side is a button

This is going to be our approach.

Let's design a card

.card {
  background-color: var(--clr-card-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.9rem 2rem;
  gap: 2rem;
}

But, some cards will look different, for eg. header card doesn't contain any background-color and our last div.stat looks very different.

So,

header.card {
  background: transparent;
  padding: 0;
  align-items: flex-start;
}

Let's continue..

There's a h1 in header.

header.card h1 {
  color: var(--clr-white);
  letter-spacing: 1.3rem;
  font-weight: 700;
  font-size: calc(var(--base-font) * 2);
}

calc() allows us to do arithmetic calculations in css. Here,

calc(var(--base-font) * 2)
    = calc(1.6rem * 2)
    = 3.2rem

Add Todo container

It is also a card. But It has some margins at the top and bottom and border-radius. So, let's add that.

.add {
  margin: 4rem 0 2.5rem 0;
  border-radius: 0.5rem;
}

And for plus button #add-btn,

/* add-btn */
.add .cb-container #add-btn {
  color: var(--clr-gb-2);
  font-size: var(--base-font);
  transition: color 0.3s ease;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* add some transition for background */
.add .cb-container {
  transition: background 0.3s ease;
}

/* define some states */
.add .cb-container:hover {
  background: var(--clr-blue);
}

.add .cb-container:active {
  transform: scale(0.95);
}

.add .cb-container:hover #add-btn {
  color: var(--clr-white);
}

And the text input container should stretch to the end. flex: 1 will do that.

.add .txt-container {
  flex: 1;
}

and the actual input field,

.add .txt-container .txt-input {
  width: 100%;
  padding: 0.7rem 0;
  color: var(--clr-gb-1);
}

We can also style the placeholder text using ::placeholder,
Here we go,

.add .txt-container .txt-input::placeholder {
  color: var(--clr-gb-5);
  font-weight: var(--fw-normal);
}

Checkbox

MARKUP

.cb-container  [Container for checkbox]
  .cb-input    [Actual checkbox] 
  .check       [A span to indicate the value of checkbox]

.cb-container

.card .cb-container {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.1rem solid var(--clr-gb-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cb-input

.card .cb-container .cb-input {
  transform: scale(1.8);
  opacity: 0;
}

Here, we're using transform: scale() ie. scale() just zooms the field.

without `scale()`	with `scale()`

Since we're hiding our input using opacity: 0, User can't see the input, but can see the container. i.e. Input has to fill the entire container. That's the point of using scale().

And our span element i.e. .check

.card .cb-container .check {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  border-radius: inherit;
}

We're using pointer-events: none; here. Since, It's positioned absolute, It hides its parent which is .cb-container thereby not letting the user to check the checkbox.

To fix that, we can use pointer-events: none; which means that the current element i.e. .check won't react to any kind of mouse events. If user clicks there, checkbox will be clicked.

We can find whether the checkbox is checked or not using :checked

.card .cb-container .cb-input:checked + .check {
  background: url("../assets/images/icon-check.svg"),
    linear-gradient(45deg, var(--clr-green), var(--clr-pink));
  background-repeat: no-repeat;
  background-position: center;
}

Here, the selector defines,

.check coming after .cb-input which is checked.

We're just adding a background image and color to indicate that this checkbox is true (checked).

Todos container

Todos container .todos is a collection of .card.

MARKUP

.todos            [todo container]
  .card           [a card]
    .cb-container + ------------ +
      .cb-input   |  [CHECKBOX]  |
      .check      + ------------ +
    .item         [Actual text i.e. todo]
    .clear        [clear button only visible when user hovers over 
                   the card]

We need to add border-radius only for first card. We can add that using :first-child.

.todos .card:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

If you look at the above image, you can see there's a line after each card. We can add that easily using,

.todos > * + * {
  border-top: 0.2rem solid var(--clr-gb-6);
}

In this block, Each card will be selected and border-top will be added to the card next to the selected card.

And for the actual text, .item

.item {
  flex: 1; /* item needs to be stretched */
  color: var(--clr-gb-2);
}

/* Hover state */
.item:hover {
  color: var(--clr-gb-1);
}

And the .clear button,

.clear {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.clear button is visually hidden. It'll only be visible when user hovers over the card.

Hover state

/* .clear when .card inside .todos is being hovered */
.todos .card:hover .clear {
  opacity: 1;
}

Stat containers `.stat`

MARKUP

.stat             [stat container]
  #items-left     [text - items-left]
  .filter         [filter-container to filter todos, we use in js]
    #all
    #active
    #completed
  .corner         [corner contains button for Clear Completed]
    button

.stat {
  border-radius: 0 0 0.5rem 0.5rem;
  border-top: 0.2rem solid var(--clr-gb-6);
  font-size: calc(var(--base-font) - 0.3rem);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Add color property */
.stat * {
  color: var(--clr-gb-4);
}

We're using grid layout here, since It is easy to make .stat container responsive in smaller devices.

And for the filter buttons .filter

.stat .filter {
  display: flex;
  justify-content: space-between;
  font-weight: var(--fw-bold);
}

.stat .filter *:hover {
  color: var(--clr-primary);
}

And finally if you see the corner Clear Completed, It's aligned to the right side.

.stat .corner:last-child {
  justify-self: end;
}

/* Hover state for button */
.stat .corner button:hover {
  color: var(--clr-primary);
}

Footer

There is only one paragraph in the footer.

footer {
  margin: 4rem 0;
  text-align: center;
  color: var(--clr-gb-5);
}

Responsive css

We need to change grid style of .stat in smaller devices, introducing two grid rows.

@media (max-width: 599px) {
  .stat {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5rem 2rem;
  }
  .stat .filter {
    grid-row: 2/3;
    grid-column: 1/3;
    justify-content: space-around;
  }
}

Thank you!, That's it for this post! Next is adding interactivity to our page using JavaScript. A post on adding interactivity to our app is here.

Feel free to check my Github Repository

If you have any questions, please leave them in the comments.

How to start Front-end Coding Challenges ? - Frontend Mentor

Hari Ram — Sat, 09 Jan 2021 08:31:20 +0000

We all know that there is a website called Frontend Mentor where we'll be given some awesome real world front-end challenges to practice and enhance our frontend skills.

Thanks to Frontend Mentor, I completed about ten challenges, I really learnt a lot.

Get Started

Go to Frontend Mentor.
Login with Github.
Go to challenge tab.

Open a challenge and download starter files (as .zip)

Start your project

Open your projects folder.
Create a new directory

frontend-[CHALLENGE NAME]
├── assets
│   ├── designs
│   └── images
├── css
│   └── styles.css
├── index.html
├── readme.md
├── scripts
│   └── scripts.js
├── style-guide.md
└── .gitignore

I use the above project structure. You'll get style-guide.md and image files from starters. Just copy them here.

designs directory contains your output screenshots and if you wish, you can include them in your readme.md.

HTML starter template

I created a little snippet in my Visual Code Editor and it generates starter template for Frontend Mentor in one tab.

Here it is,

Here is the starter template index.html

<!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" />
    <title>Frontend Mentor | Challenge Name</title>
    <meta
      name="description"
      content="This is a front-end coding challenge - Challenge Name"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
      href="https://fonts.googleapis.com/"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
      <!-- Happy Coding -->
  </body>
</html>

CSS Styles

When it comes to CSS, I always love to start from scratch.

No website is completely unstyled.

Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.

I usually reset all the styles and I start from scratch.

Here is my styles.css

:root{
  /* colors and fonts */
  --font: "Montserrat", sans-serif;
  --white: #ffffff;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

html, body{
  height: 100%;
}

body{
  width: 100%;
  font-family: var(--font);
}

/* Other rule-sets */

There we go, Now we can start writing actual content to design the page.

Frontend Mentor Challenges will be really helpful for those who are looking to enhance their frontend skills.

Introduction to Web Technology and HTML 5

Hari Ram — Fri, 08 Jan 2021 11:48:41 +0000

Web Technology

Short Answer: Technology which allows us to interact with the hosted data (data which is hosted somewhere in the world) i.e., Websites and Web applications.

It involves the use of three main languages HTML, CSS and JS.

Browser

Browser is a software that requests the site that you want to visit and the site which in turn returns response which includes above said three languages.

Browser knows how to read the response and renders it as a beautiful webpage.

HTML

An Acronym for Hypertext Markup Language

Let's split the above into three,

Hypertext - Text which take you somewhere (Links)

When you read a page in Wikipedia, you'll see a bunch of blue texts. Those are called hypertexts. If you click on that, you'll be taken to a different page.

Markup - HTML has series of markup elements that you can use to define your content or parts of the webpage.

Example

If you want to include a paragraph, you have to use HTML Paragraph Element <p>.

If you want to have headers and footers in your page, you can define that using HTML <header> and <footer> element.

Language - Yeah!, It is a markup language.
It is not a programming language, it doesn't have variables, expressions, functions and all.

Since It uses markup to display contents, we can call it as a markup language.

Terminology

I said earlier HTML contains series of markup elements. It is important to understand what element is and how you should write.

Element

An element includes an opening tag, content and a closing tag.

<p>Hello world</p>

Tag - Element name surrounded by angular brackets.

Here in the above code block <p> and </p> are opening and closing tags

Attributes

Opening tags may contain attributes which are just extra information about the element.

<p title="Welcome!">Hover over this</p>

Here in the code block, title is an attribute and it is set to a text "Welcome!"

title usually gives tooltip information. When the user hovers over the text, Welcome will be displayed as tooltip.

Empty Elements

They don't have enclosed content and closing tag.

There is an element called <img> in html which is used to embed images in the webpage.

<img src="mypic.png" alt="My Pic" />

In the code block, <img> doesn't have any content inside and there is nothing like </img> here.

These elements are also known as Self-closing elements and Singletons since it works by attributes, doesn't need any content.

Boilerplate - Starter Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>

  </body>
</html>

This is the starter template of a HTML webpage.

<!DOCTYPE html>

This should always be the first line of a page. This is like required introduction. This is where we declare our doctype (document type) and version, which is HTML 5.

It tells the browser that this page should be rendered as a HTML 5 webpage.

<html> ... </html>

This is the root element of our page and It has two children <head> and <body>.

<head> ... </head>

This is a container for machine-readable contents. It has nothing to do with output of the page. But, It contains browser-readable information like character set, title, description, viewport, etc.

<title>My Page</title>

This is title of the page which will be shown in the browser tab.

This will also be used as title of the page when user bookmarks the page.

<meta charset="utf-8" />

This is where we declare our character set. All the text in our page will be encoded using a character system called utf-8 which contains all international symbols and emoji's 👍 that you can use in your page.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This line sets the viewport of the page when you visit the page in mobile browser.

width=device-width sets width of the page to width of the device i.e., 100%.

initial-scale=1.0 sets the zooming level of the page, we're setting it to 1.0.

<body> ... </body>

This is the visible area of a webpage. This is what user sees.

Let's explore some HTML elements

Headings

Headings as the name suggests allow you to display headings and sub-headings in the page.

HTML has six levels of headings from <h1> to <h6>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

If you want to have some texts in your page, simply wrap inside <p> element.

<p>This is my new post</p>

Lists

HTML has list elements which you can use to present list-like contents.

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

In the above code block, <ul> is unordered list of items (bulleted list) and <ol> is ordered list of items(numbered list). You can see clearly in the screenshot below,

Dictionary Lists

There is an another list element called Dictionary list or Description list which allows us to write statement like contents.

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>Javascript</dd>
</dl>

In the page,

Images

We can use <img> element to include images.

<img src="https://picsum.photos/200/200" alt="A pic">

src is gonna be the url (source) of the image and alt is called alternative text if the image cannot be displayed for some reasons. Reasons might be,

If the image's path is wrong
If the user is visually impaired, he'll use screen reader, a software which reads the entire page. If it encounters an <img> element, it'll read the text given in alt attribute instead of image.

Links

To connect webpages.

<a href="https://google.com">Visit google</a>

The output looks like,

Visit google

If user clicks the text, he'll be taken to the specified url.

Here comes the attribute href stands for hyper reference.

HTML Comments

Comments are the place where we can write notes and they'll be ignored when browser renders our page.

<!-- This is a paragraph -->
<p>Hello</p>

Let's create a simple page using what we've seen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Some random texts</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quibusdam
      nesciunt tenetur at doloremque magni libero, iure ab eos fugiat.
    </p>
    <img src="https://picsum.photos/200/200" alt="A random picture" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, harum?
    </p>
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Picsum</li>
    </ul>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni,
      assumenda?
    </p>
    <p>Visit <a href="https://google.com">Google</a>
  </body>
</html>

Your page looks like this:

Forem: Hari Ram

Creating a simple carousel using JavaScript

HTML

Card Container

JavaScript

Concept

Methods we're going to use in JavaScript

TODO APP using HTML, CSS and JS - Local Storage [Interactivity - JavaScript]

Local Storage

Set and Get

How's ours?

Get all TODOS when page loads

Spread operator [...]

stateTodo

removeTodo

When user adds new Todo

That's it

Now call main when our page loads completely

TODO APP using HTML, CSS and JS - Local Storage [Design - HTML and CSS]

Design

Boilerplate

Set up colors and fonts

Get rid of default css - Using css resets

Background

HTML

Some more resets

Approach

Let's design a card

Let's continue..

Add Todo container

Checkbox

Todos container

Stat containers .stat

Footer

Responsive css

How to start Front-end Coding Challenges ? - Frontend Mentor

Get Started

Start your project

HTML starter template

CSS Styles

Introduction to Web Technology and HTML 5

Web Technology

Browser

HTML

Terminology

Boilerplate - Starter Template

Let's explore some HTML elements

HTML Comments

Let's create a simple page using what we've seen.

Spread operator `[...]`

`stateTodo`

`removeTodo`

Now call `main` when our page loads completely

Stat containers `.stat`