Forem: hannaA

Using the Fetch API

hannaA — Tue, 09 Aug 2022 17:09:00 +0000

Fetching a JSON file across the network and printing it to the console

<div id="posts">...</div>
    <script>
        const API = 'https://';

        const postElement = document.querySelector('#posts');
        let page = 0;

        fetch(`${API}/posts`)
        .then(response => {
            return response.json();
        }) 

        .then(posts => {}
        })
        .catch(error => console.error(error));
    </script>

as a result

Slick Slider for fast creation of a responsive slider of any complexity on a website

hannaA — Tue, 09 Aug 2022 16:53:00 +0000

Solution #1

<body>
  <a class="left" onclick="nextSlide(-1)">❮</a>  
  <a class="right" onclick="nextSlide(1)">❯</a>

  <div class="main__section">...</div>
</body>

var slide_index = 1;  
        displaySlides(slide_index);  
        function nextSlide(n) {  
            displaySlides(slide_index += n);  
        }  
        function currentSlide(n) {  
            displaySlides(slide_index = n);  
        }  
        function displaySlides(n) {  
            var i;  
            var slides = document.getElementsByClassName("main__section-img");  
            if (n > slides.length) { slide_index = 1 }  
            if (n < 1) { slide_index = slides.length }  
            for (i = 0; i < slides.length; i++) {  
                slides[i].style.display = "none";  
            }  
            slides[slide_index - 1].style.display = "block";
        }

Solution #2

let next = document.getElementById('next');
let prev = document.getElementById('prev');

let screenWidth  = window.innerWidth;

let isMobile = screenWidth < 420;

console.log(screenWidth);
$(document).ready(function(){
    $('.team-members').slick({
        dots: isMobile,
        infinite: true,
        speed: 300,
        slidesToShow: isMobile ? 1: 4,
        slidesToScroll: 1,
        nextArrow: next,
        prevArrow: prev,
      });
  });

Basic terms and JavaScript syntax

hannaA — Sun, 31 Jul 2022 13:17:00 +0000

Request a user’s name and display the response “Hello, [name]”

let name = prompt ("enter name");
alert("hello" + " " + name);
alert('hello ${name}')

Request a user’s year of birth, count his age, and display the result. Store the current year as a constant

let ageInput = prompt ("enter birth year");
const YEAR = 2022
alert (YEAR - parseFloat(ageInput) -1)

Request a length of a side of a square from a user and display the perimeter of the square

let squereSide = prompt ("enter squere side length");
alert(squereSide * 4)

Request a radius of a circle and display the area of such a circle

const PI = 3.14159;
let radius = prompt("circle radius");
alert(PI * (radius*2))

Request a distance in km between the two cities from a user, and the time they want to cover it within. Count the speed needed to be on time

let distanceCovered = prompt("distance? (km)");
let timeBetween = prompt("time? (hrs)");
alert (distanceCovered/timeBetween)

Create a currency converter. A user types in USD and the program converts them to EUR. The exchange rate should be stored as a constant

const RATE = 0.9;
let USD = prompt("USD exchange into EUR");
alert(USD * 0.9)

The user types in a sum of bank deposits for 2 months with a yearly interest rate of 5%. The program counts the sum of interest

const RATE = 0.05;
let sum = prompt("input sum of your bank deposits");
alert(sum * RATE / 6)

Loops and conditions

hannaA — Sun, 31 Jul 2022 13:07:00 +0000

Request two numbers and find only their largest common divisor

let numberOne = prompt("input the first number");
let numberTwo = prompt("input the second number");
let smaller = 0;
let bigger = 0; 
let LCD = 0;

if (numberOne > numberTwo) {
    smaller = numberTwo;
    bigger = numberOne;
} else {
    smaller = numberOne;
    bigger = numberTwo;
}

for (let i = 0; i <= smaller; i++) {
    if (smaller % i === 0 && bigger % i === 0) {
        LCD = i;
        console.log("LCD", LCD);
    }
}

JS Program to Remove Duplicates From Array

hannaA — Sat, 30 Jul 2022 10:45:00 +0000

solution1

let array = ['1', '2', '3', '2', '3'];

let uniqueArray = [];
array.forEach((c) => {
    if (!uniqueArray.includes(c)) {
        uniqueArray.push(c);
    }
});

console.log(uniqueArray);

solution2

function getUnique(arr){

    let uniqueArr = [];

    //loop through array 
    for(let i of arr) {
        if(uniqueArr.indexOf(i) === -1) {
            uniqueArr.push(i);
        }
    }
    console.log(uniqueArr);
}
const array = [1,2,3,2,3];

solution3

let array = ['1', '2', '3', '2', '3'];
let uniqueArray = [...new Set(array)];

console.log(uniqueArray);

Class basic syntax

hannaA — Sat, 30 Jul 2022 10:11:00 +0000

user => first name and last name, return full name as a String

class User{
    constructor(name, lastName){
        this.name = name;
        this.lastName = lastName;
    }

    get fullName(){
        return this.name + " " + this.lastName;
    }
}

var user = new User("", "");
console.log(user.fullName);

media => TvShows, movies, (episode, season), (duration)

class Media{
    constructor(name, year, imdb){
        this.name = name;
        this.year = year;
        this.imdb = imdb;
    }
}
    class Tvshows extends Media{
        constructor(name, year, imdb, episodes, seasons){
            super(name, year, imdb);
            this.episodes = episodes;
            this.seasons = seasons;
        }
    }

    class Movies extends Media{
        constructor(name, year, imdb, duration){
            super(name, year, imdb);
            this.duration = duration;
        }
    }

find the mileage of the car

class Car {
    constructor (year) {
        this.year = year;
    }

     getAge(now){
        return now - this.year;
     }
}

let mini = new Car(2018)

console.log(mini.getAge(2022));

addEventListener

hannaA — Tue, 19 Jul 2022 22:20:42 +0000

HTML codes

<div id='container'>
      container
</div>

addEventListener function

this function listens to the event which is passing through the first parameter
and calls a function which passes through the second parameter


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToBlue(event) {
    event.target.style.backgroundColor = "blue";
}
    container.addEventListener("mouseover", backgroundToBlue);

addEvent "mouseleave"


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToBlue(event) {
    event.target.style.backgroundColor = "blue";
}

function backgroundToPink(event) {
    event.target.style.backgroundColor = "pink";
}

container.addEventListener("mouseover", backgroundToBlue);
container.addEventListener("mouseleave", backgroundToPink);

add randomColor to the target and body


const container = document.getElementById("container");
container.style.backgroundColor = "pink";


function backgroundToNext(event) {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    event.target.style.backgroundColor = "#" + randomColor;
}

const setBg = () => {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = "#" + randomColor;
    color.innerHTML = "#" + randomColor;
}

container.addEventListener("mouseover", setBg);
container.addEventListener("mouseover", backgroundToNext);