Making these divs clickable jsonparse

Making these divs clickable jsonparse - javascript

I would like to have each of these posts to be clickable, so that a new page appears and I can show more detailed information of the clicked post. I am using a jsonplaceholder to get my information
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Mini reddit</title>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
</div>
<div class="container">
<div class="row" id="postsDiv">
</div>
</div>
<script src="js_mini_reddit.js"></script>
</body>
</html>
javascript:
var div = document.getElementById("postsDiv");
var count = 0;
function getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true);
xhr.onload = function(){
if (this.status == 200)
{
let data = JSON.parse(this.responseText);
for (let index = 0; index < 10; index++)
{
div.innerHTML +=`
<div class="col-4 text-white card bg-dark mx-auto border border-white" >
<div class="card-body">
<p class="card-title">ID: ${data[count].id} </p>
<p class="card-title">TITLE: ${data[count].title} </p>
<p>BODY: ${data[count].body} </p>
</div>
</div>`
count += 1;
}
}
}
xhr.send();
}
getData();

Related

Electron : How to display system RAM and CPU usage in real-time

so I'm trying to make an app that displays the cpu usage, ram usage, gpu usage and disk usage to a bar graph. I'm at the point where I can display the total percent of ram used but I am not able to update the value in real time and show it to the bar graph. Any help would be greatly appreciated.
Code
dashboard.js
const os = require("os");
const fs = require("fs");
const { memoryUsage } = require("process");
const os_free_mem = os.freemem()
let free_mem = (Math.round(os_free_mem / (1024*1024)))
const os_total_mem = os.totalmem()
let total_mem = (Math.round(os_total_mem / (1024*1024)))
const cpu_usage = document.querySelector(".cpu_usage");
const ram_usage = document.querySelector(".ram_usage");
const gpu_usage = document.querySelector(".gpu_usage");
const disk_usage = document.querySelector(".disk_usage");
const free_mem_lbl = document.getElementById("mem")
const total_mem_lbl = document.getElementById("tmem")
// FUNCTIONS
function update_cpu_usage(cpu_usage, value) {
value = Math.round(value);
cpu_usage.querySelector(".cpu_usage_fill").style.width = `${value}%`;
}
function update_ram_usage(ram_usage, value) {
value = Math.round(value);
ram_usage.querySelector(".ram_usage_fill").style.width = `${value}%`;
}
function update_gpu_usage(gpu_usage, value) {
value = Math.round(value);
gpu_usage.querySelector(".gpu_usage_fill").style.width = `${value}%`;
}
function update_disk_usage(disk_usage, value) {
value = Math.round(value);
disk_usage.querySelector(".disk_usage_fill").style.width = `${value}%`;
}
function find_cpu_percent() {
var free_mem_percent = Math.round((free_mem / total_mem ) * 100);
free_mem_lbl.innerText = `${free_mem_percent}`
}
find_cpu_percent();
tmem.innerText = `${total_mem}`
update_cpu_usage(cpu_usage, 55);
update_ram_usage(ram_usage, free_mem_percent);
update_gpu_usage(gpu_usage, 24);
update_disk_usage(disk_usage, 75)
dashboard.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>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
<script src="https://kit.fontawesome.com/e637815e35.js" crossorigin="anonymous"></script>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<div class="main">
<div class="sidebar">
<ul>
<li><ion-icon name="home-sharp"></ion-icon></li>
<li><ion-icon name="speedometer-outline"></ion-icon></li>
<li><i class="fas fa-clock-rotate-left"></i></li>
<li><i class="fa-brands fa-usb"></i></li>
</ul>
</div>
<div class="main-content">
<h3>System Information</h3>
<!-- Usage Bars -->
<span class="cpu_text">CPU</span>
<div class="cpu_usage">
<div class="cpu_usage_fill"></div>
</div>
<span class="ram_text">RAM</span>
<div class="ram_usage">
<div class="ram_usage_fill"></div>
</div>
<span class="gpu_text">GPU</span>
<div class="gpu_usage">
<div class="gpu_usage_fill"></div>
</div>
<span class="disk_text">DISK</span>
<div class="disk_usage">
<div class="disk_usage_fill"></div>
</div>
<!-- System Specifications -->
<div class="specs">
<h3>System Specifications</h3>
<h5>CPU</h5>
<p class="info" id="cpu_name">CPU : </p>
<p class="info" id="cpu_speed">Speed :</p>
<p class="info" id="cpu_cores">Cores : </p>
<p id="mem" style="margin-left: 200px; font-size:40px"></p>
<p id="tmem" style="margin-left: 200px; font-size:40px"></p>
</div>
<script src="js/dashboard.js"></script>
</div>
</body>
</html>

Need to understand how to display this XML feed into HTML. Simply looking to pull in Soccer Team Names and the Score

Looking to understand how to display this XML feed into HTML. Simply looking to pull in Soccer Team Names and the Score. Please help!!! If possible, I would love to display basic HTML that pulls in just the team names and scores that are associated with the XML snippet below. Please keep in mind that the file locally was stored as "soccer.xml".
XML Snippet
<?xml version="1.0" encoding="UTF-8"?>
<Soccer>
<Details VisitingTeam="Argentina" VisitorScore="2" HomeTeam="USA" HomeScore="4" />
</Soccer>
//Display it
function displayFEED(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
//Call XML Feed with Live URL
xmlhttp.open("GET", 'soccer.xml', true);
xmlhttp.send();
}
displayFEED(1);
// Call tag names from XML and match ID's
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("Soccer");
document.getElementById("HomeTeam").innerHTML = x[i].getElementsByTagName("Details")[0].childNodes[0].nodeValue;
document.getElementById("HomeScore").innerHTML = x[i].getElementsByTagName("Details")[1].childNodes[1].nodeValue;
document.getElementById("VisitingTeam").innerHTML = x[i].getElementsByTagName("Details")[2].childNodes[2].nodeValue;
document.getElementById("VisitorScore").innerHTML = x[i].getElementsByTagName("Details")[3].childNodes[3].nodeValue;
}
<!doctype html>
<html lang="en">
<head>
<title>Testing Soccer XML Score Feed</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-8">Testing Soccer XML Score Feed</h1>
<hr class="my-2">
<div class="row">
<div class="col-12">
<div id="HomeTeam"></div>
<div id="HomeScore"></div>
</div>
<div class="col-12">
<div id="VisitingTeam"></div>
<div id="VisitorScore"></div>
</div>
</div>
</div>
</div>
</body>
</html>

What are the methods to limit the number and time of alerts?

when I click on the "Todo Ekleyin" button, I get a warning. However, I would like this alert to appear only once per press, not multiple times, and can be pressed again after the alert disappears. How can I achieve this and?
Thank you in advance for your answer, good work. (If there is a method other than the method you suggested, I would be glad if you can write its name.)
// Tüm Elementleri Seçme
const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const todoList = document.querySelector(".list-group");
const firstCardBody = document.querySelectorAll(".card-body")[0];
const secondCardBody = document.querySelectorAll(".card-body")[1];
const filter = document.querySelector("#filter");
const clearButton = document.querySelector("#clear-todos");
eventListeners();
function eventListeners() { // Tüm Event Listenerlar
form.addEventListener("submit", addTodo);
}
function addTodo(e) {
const newTodo = todoInput.value.trim();
if (newTodo === "") { // Alarm Verme
showAlert("danger","Lütfen Bir Todo Giriniz");
}
else {
addTodoToUI(newTodo);
}
addTodoToUI(newTodo);
e.preventDefault();
}
function showAlert(type,message){
const alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.textContent = message;
firstCardBody.appendChild(alert);
//setTimeout
setTimeout(function(){
alert.remove();
}, 1000);
}
function addTodoToUI(newTodo) { // String Değerini List Item olarak Ekleyecek.
// List Item Oluşturma.
const listItem = document.createElement("li");
// Link Oluşturma
const link = document.createElement("a");
link.href = "#";
link.className = "delete-item";
link.innerHTML = "<i class = 'fa fa-remove'></i>";
listItem.className = "list-group-item d-flex justify-content-between";
// Text Node
listItem.appendChild(document.createTextNode(newTodo));
listItem.appendChild(link);
// Todo List'e List Item'ı Ekleme
todoList.appendChild(listItem);
// Ekleme Sonrası Input'tan yazı Silme
todoInput.value = "";
}
// Todo Ekleme Bilgi Mesajı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Todo List</title>
</head>
<body>
<div class="container" style="margin-top: 20px">
<div class="card row">
<div class="card-header">Todo List</div>
<div class="card-body">
<form id="todo-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="todo" id="todo"
placeholder="Bir Todo Girin" />
</div>
</div>
<button type="submit" class="btn btn-danger">Todo Ekleyin</button>
</form>
<hr />
<!-- <div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div> -->
</div>
<div class="card-body">
<hr />
<h5 class="card-title" id="tasks-title">Todolar</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id="filter"
placeholder="Bir Todo Arayın" />
</div>
</div>
<hr />
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between">
Todo 1
<a href = "#" class ="delete-item">
<i class = "fa fa-remove"></i>
</a>
</li>-->
</ul>
<hr />
<a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="berkay.js"></script>
</body>
</html>

You can put an integer in your alert function and every using array increase a one more.
For example, if you want after 5 times don't show alert.
var a = 0;
var b = true;
if (newTodo === "" || b) { // Alarm Verme
showAlert("danger","Please Give me a Todo!");
a++;
if(a == 5 ){
b = false;
}
}

JS click event listener only works once and not with the expected if statement

I'm using a library for comparing different photos, like a "before and after" sort of thing, where they're displayed one on top of the other and there's a button in the center that you can drag left or right to see the differences.
Now, what I'm trying to do is implement two buttons - one on the left of the picture and one on the right.
When you click these buttons, I want the photos to change with the previous two or the next two.
I made an if statement for the buttons, but they don't work properly, although I don't notice any obvious error.
HTML code
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="" id="originalImage" alt="Original Image">
<div class="cd-resize-img">
<img src="" id="modifiedImage" alt="Modified Image">
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
JavaScript code
let originalImage = document.querySelector('#originalImage');
let modifiedImage = document.querySelector('#modifiedImage');
document.querySelector('#leftArrow').addEventListener("click", function(){
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/1.jpg";
originalImage.src = "img/2.jpg";
}
});
document.querySelector('#rightArrow').addEventListener('click', function(){
if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";
}
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/5.jpg";
originalImage.src = "img/6.jpg";
}
if ((modifiedImage.src = "img/5.jpg") && (originalImage.src = "img/6.jpg")){
modifiedImage.src = "img/7.jpg";
originalImage.src = "img/8.jpg";
}
});
Right now, if I open the page, photos 1 & 2 are shown. If I click on the "right" button, it will display pics 7 & 8, and from there, if I click on the "left" button it will display pics 1 & 2 again, although the condition I have on the "left" button doesn't even include the scenario where you're at pics 7 & 8.
Please help, I really don't understand what's happening

I think what you are trying to achieve is that, when you click on the right button you want to show the next two images and when you click on the prev button you want to show the previous two images. If that's the case then you can check my solution.
Here is the js file.
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
And here is the .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="./img/1.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
#wrapper {
display: flex;
}
.cd-image-container {
display: flex;
}
#leftArrow,
#rightArrow {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

Use == or === in if statement
Give this a shot
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";here

When I rendering my template I would like to display a function of eventHandler

I made a templating with handlebars, so now my problem is simple :
When user put a letter or words or something else in the input field, the function launch the ajax call and he return the result.
But, I think, I took the problem upside down.
So if you would like to help me, you can check the code :
import Handlebars from 'handlebars'
export default class Templating {
constructor() {
this._grabDom();
this._addListener();
this._getData();
this._putData();
}
/* PRIVATE METHODS */
_createBounds() {
['_getData', '_putData', '_prevent']
.forEach((fn) => this[fn] = this[fn].bind(this));
}
_putData() {
for (let i = 0; i < this._parsing.search.length; i++) {
let compiledTemplate = Handlebars.compile(this._dom.cardsTemplate);
let generated = compiledTemplate(this._parsing.search[i]);
this._dom.cardsContainer.innerHTML += generated
}
}
_getData() {
let req = new XMLHttpRequest();
req.open('GET', 'http://joibor.fr/api/search.json', false);
req.send(null);
if (req.status === 200) {
this._parsing = JSON.parse(req.responseText);
}
}
_prevent(pEvt) {
if (pEvt.keyCode === 13) {
pEvt.preventDefault();
this._value = pEvt.target.value;
}
}
/* END PRIVATE METHODS */
/* PUBLIC METHODS */
/* END PUBLIC METHODS */
/* EVENT HANDLER */
_addListener() {
this._dom.searchInput.addEventListener('keydown', this._prevent)
}
/* END EVENT HANDLER */
/* GRAB DOM */
_grabDom() {
this._dom = {};
this._dom.cardsTemplate = document.querySelector('#cards-template').innerHTML;
this._dom.cardsContainer = document.querySelector('.section-bottom__template');
this._dom.searchInput = document.querySelector('.js-search-input');
}
/* END GRAB DOM*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Search</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-top">
<form class="form">
<label class="form__label" for="">Lieux</label>
<input type="text" class="form__input js-search-input" placeholder="...">
</form>
</div>
<section class="section-bottom">
<h2 class="section-bottom__title">Les membres qui se trouvent à Reims</h2>
<div class="section-bottom__template"></div>
<script id="cards-template" type="text/x-handlebars-template">
<div class="cards">
<div class="cards__position">
<img class="cards__image" src="{{image}}" alt="profil 1">
<div class="cards-content">
<div class="about about--flex">
<p class="about__name">{{name}}</p>
<p class="about__city">{{city}}</p>
</div>
<div class="text">
<p class="text__content"><span class="text__content__cat">Disponible : </span> {{start}} <span class="text__content__cat">au</span> {{end}}</p>
</div>
<div class="place">
<p class="place__content"><span class="place__content__cat">Nombre max de voyageurs : </span> {{max}}</p>
</div>
</div>
</div>
</div>
</script>
</section>
<script src="js/script.js"></script>
</body>
</html>
Actually, the templating works but not the search I can't solved this problem.

Develop Reference

JavaScript is the programming language of the Web.

Making these divs clickable jsonparse - javascript

Related

Electron : How to display system RAM and CPU usage in real-time

Need to understand how to display this XML feed into HTML. Simply looking to pull in Soccer Team Names and the Score

What are the methods to limit the number and time of alerts?

JS click event listener only works once and not with the expected if statement

When I rendering my template I would like to display a function of eventHandler

Categories

Resources