Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am running a node js application with AWS.
This is server less application therefore when I am trying to install through this
https://www.serverless.com/plugins/serverless-offline
Things are working fine till here.. after that when I am trying to run sls offline I am getting this error.
zsh: command not found: sls
Can anybody help me what I am missing here. Also I have places all the access details of my AWS creads in AWS credentials.
I was looking for help displaying a JavaScript file onto the front of my webpage. When connecting js file to html it doesn’t display the file onto the webpage. looking into inspect it shows that the canvas is there as well as testing to see if the js file is connected through console shows that it is connected. I don’t know how to fix this. here is the image that shows the canvas is on the webpage 
here is the code for the js file :
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
const numStars = 500;
let stars = [];
function setup() {
createCanvas(500,500);
stroke(255);
strokeWeight(2);
for(let i = 0; i < numStars; i ++) {
stars.push(new Star(random(width), random(height)));
}
}
function draw() {
background(0, 50);
const acc = map(mouseX, 0, width, 0.005, 0.2);
stars = stars.filter(star => {
star.draw();
star.update(acc);
return star.isActive();
});
while(stars.length < numStars) {
stars.push(new Star(random(width), random(height)));
}
}
class Star {
constructor(x, y) {
this.pos = createVector(x, y);
this.prevPos = createVector(x, y);
this.vel = createVector(0, 0);
this.ang = atan2(y - (height/2), x - (width/2));
}
isActive() {
return onScreen(this.prevPos.x, this.prevPos.y);
}
update(acc) {
this.vel.x += cos(this.ang) * acc;
this.vel.y += sin(this.ang) * acc;
this.prevPos.x = this.pos.x;
this.prevPos.y = this.pos.y;
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
}
draw() {
const alpha = map(this.vel.mag(), 0, 3, 0, 255);
stroke(255, alpha);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
}
}
function onScreen(x, y) {
return x >= 0 && x <= width && y >= 0 && y <= height;
}
here is the code in my css file
@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Shadows+Into+Light&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "DynaPuff", cursive;
}
.canvas {
height: 100%;
width: 100%;
display: flex;
position: absolute;
}
body {
min-height: 25%;
background: linear-gradient(#868686, #000000);
}
.navbar-container {
display: flex;
}
.navbar {
max-width: 1560px;
padding: 20px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
ul {
text-transform: uppercase;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
ul li {
list-style: none;
margin-left: 20px;
}
ul li a {
text-decoration: none;
padding: 6px 15px;
color: #ffff;
border-radius: 20px;
transition: all 0.3s ease-in-out;
}
ul li a:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
ul li a:active{
box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
transition: all 0.3s ease-in-out
}
.jumping-letters { /* make the transformation smooth over 0.5 seconds */
animation: jump 1s infinite;
transition: all 0.3s ease-in-out; /* apply the jump animation */
}
@keyframes jump {
50% {
transform: translateY(-5px);
transition: all 0.3s ease-in-out /* move the letters up by 10 pixels */
}
}
.hello {
color: #ffff;
display: grid;
margin: 0;
padding: 100px;
place-items: center;
min-height: 100vh;
width: 100%;
text-align: center;
}
.text {
flex: auto;
color: white;
white-space: nowarp;
font-size: 5vw;
font-size: 1em;
z-index: 5;
}
.projects {
position: relative;
color: #000000;
}
.education {
position: relative;
color: #000000;
}
.aboutme {
position: relative;
color: #000000;
}
.resume {
position: relative;
color: #000000;
}
.body-container1 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container1 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container2 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container3 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container4 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.sec {
padding-bottom: 50px;
border-radius: 6px;
}
here is the full code in 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>Mustafa Said</title>
<link rel="stylesheet" href="./style.css" />
</head>
<div>
# <canvas class="canvas">
# <script src="space.js"></script>
# </canvas>
<div class="container">
<div class="navbar-container">
<div class="navbar">
<ul class="jumping-letters">
<li><a href="#projects">Projects</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#aboutme">About me</a></li>
<li><a href="#resume">Resume</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="hello">
<div>
<p class="jumping-letters2">Hello, I'm</p>
<h1 class="jumping-letters2">Mustafa Said</h1>
<h3 class="jumping-letters2">but most call me moosee</h3>
</div>
</div>
</div>
</div>
<section id="projects" class="sec projects">
<div class="container">
<div class="body-container1">
<div class="column1">
<h2>Projects</h2>
<div class="desc">
<h3>The Illumihat - Python</h3>
<p>
The Illumihat is a wearable device designed to assist visually
impaired individuals with daily tasks. It uses radioactive and
photosynthetic sensors to detect the surrounding environment and
provide feedback to the user through various means, such as audio
output or haptic feedback. Using a bredboard and a Raspberry pi,
Python was used to implemented the code needed to run these
sensors.
</p>
<h3>Project Snowflake - JavaScript</h3>
<p></p>
<h3>Personal Portfolio - HTML, CSS</h3>
you're looking right at it :)
</div>
</div>
</div>
</div>
</section>
<section id="education" class="sec education">
<div class="container">
<div class="body-container2">
<div class="Education">
<h2>Education</h2>
<div class="desc">
<h3>
Computer Science Software Engineering - ASU (Arizona State
University)
</h3>
<p>
- Completed courses: CSE 205 (OBJECT-ORIENTED PROGRAM & DATA
STRUCTURES), CSE110 (PRINCIPLES OF PROGRAMMING), FSE 100
(INTRODUCTION TO ENGINEERING), MAT 266 (CALCULUS II), MAT 265
(CALCULUS I) - Currently enrolled courses: CSE 120 (DIGITAL DESIGN
FUNDAMENTALS), CSE 240 (INTRO TO PROGRAMMING LANGUAGES), MAT267
(CALCULUS III)
</p>
</div>
</div>
</div>
</div>
</section>
<section id="aboutme" class="sec aboutme">
<div class="container">
<div class="body-container3">
<div class="column1">
<h2>About Me</h2>
<div class="desc">
<p>
My name is Mustafa Said and i am a current sophmore at ASU
studying Computer Science under the Fulton Schools of Engineering.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="resume" class="sec resume">
<div class="container">
<div class="body-container4">
<div class="column1">
<h2>Resume</h2>
<div class="desc">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
quaerat nemo, voluptate maiores minima corporis omnis, ratione
</p>
</div>
</div>
</div>
</div>
</section>
<footer></footer>
</div>
</html>
How do I convert this into milliseconds using Dayjs or just plain JavaScript
const timeObj = { "years": 0, "months": 0, "days": 0, "hours": 0, "minutes": 52, "seconds": 35, "milliseconds": 317 };<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>I have this function that divides given article by given letter count but it also split the words at the end of the lines, I would like to at hypen at the end of the line if the word is not completed/splitted.
var text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
function divideTextByLetterCount(text, letterCount) {
let dividedText = "";
let currentLetterCount = 0;
for (let i = 0; i < text.length; i++) {
dividedText += text[i];
currentLetterCount++;
if (currentLetterCount === letterCount) {
if (dividedText.slice(-1) == ' ') {
dividedText = dividedText.slice(0, -1)
}
dividedText += "n";
currentLetterCount = 0;
}
}
let dividedTextArr = dividedText.split('n');
dividedTextArr.forEach((val, i) => {
if (val.slice(0, 1) == ' ') {
dividedTextArr[i] = val.slice(1);
}
});
return dividedTextArr.join('n');
}
console.log(divideTextByLetterCount(text, 20));
So the output is,
Lorem Ipsum is simpl
y dummy text of the
printing and typeset
ting industry. Lorem
Ipsum has been the
industry's standard
dummy text ever sinc
e the 1500s, when an
unknown printer too
k a galley of type a
nd scrambled it to m
ake a type specimen
book. It has survive
d not only five cent
uries, but also the
leap into electronic
typesetting, remain
ing essentially unch
anged. It was popula
rised in the 1960s w
ith the release of L
etraset sheets conta
ining Lorem Ipsum pa
ssages, and more rec
ently with desktop p
ublishing software l
ike Aldus PageMaker
including versions o
f Lorem Ipsum.
But it should add hypen at the end of the lines which ends with uncompleted words like, simpl must be simpl- or sinc must be sinc-, how do I create that logic? thanks.
im using laravel and javascript and the rowcount does not read the following variables after first vairables. what im trying to do is to submit multiple IPs and when i check it using dd only gets the first variable and in the “alert(rowCount);”. plss help with this thank you..
this is the blade.php
</div>
<div class="row">
<div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<h5 class="text-truncate col-10 mt-3"> <span class="fas fa-list-ol icons"></span> <b>Server Description</b></h5>
<hr class="col-11 col-xs-11 col-sm-11"></hr>
<div class="tbl_div row col-11 col-xs-11 col-sm-11 ">
<div class="row col-2 col-xs-2 col-sm-2 col-md-3">
<a href="#" class="p-2" id="addrow"><span class="fas fa-plus"></span> ADD Source / Destination</a>
</div>
<table class="table table-hover table-responsive table-fw-widget " id="tblItems" >
<thead class="">
<td class="col-md-1 text-center border-0">
<td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Source Servername</td>
<td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
<td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Destination Servername</td>
<td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
</thead>
<tbody>
<!-- @foreach(old('source_name', ['value']) as $fw_ip) -->
<tr>
<td class="col-md-1 text-center">
<label class="form-label" id="row_no"><b>#1</b></label></td>
<td class="col-md-3">
<!-- <label class="form-label">Item</label> -->
<input type="text" name="source_namex[]" class="form-control">
</td>
<td class="col-md-3">
<!-- <label class="form-label">Item</label> -->
<input type="text" class="form-control text-center" name="sourceip[]" maxlength="15" value="{{ old('sourceip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((d{1,2}|1dd|2[0-4]d|25[0-5]).){3}(d{1,2}|1dd|2[0-4]d|25[0-5])$">
</td>
<td class="col-md-3">
<!-- <label class="form-label">Item</label> -->
<input type="text" name="destname[]" class="form-control" value="{{ old('destname.'.$loop->index) }}">
</td>
<td class="col-md-4">
<!-- <label class="form-label">Item</label> -->
<input type="text" class="form-control text-center" name="destip[]" maxlength="15" value="{{ old('destip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((d{1,2}|1dd|2[0-4]d|25[0-5]).){3}(d{1,2}|1dd|2[0-4]d|25[0-5])$">
</td>
<td class="col-md-3">
<center><span class="fas fa-trash-alt fa-lg mt-2 icons removerow"></span></center>
</td>
</tr>
<!-- @endforeach -->
</tbody>
</table>
</div>
<div class="row">
<div class="col-6 col-xs-6 col-sm-6 col-md-3 col-lg-3 col-xl-2 ">
<div class="form-group">
<button type="submit" class="btn btn-allcard btn-block col-10">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
javascipt
<script type="text/javascript">
var rowCount = $("#tblItems tbody>td").length;
var rowCount = ;
alert(rowCount);
$('.type').change(function()
{
});
$('#addrow').click(function()
{
rowCount += 1;
$("#tblItems tbody>tr:first").clone(true).insertAfter("#tblItems tbody>tr:last");
$("#tblItems tbody>tr:last").attr("id", "tr"+rowCount);
$("#tblItems tbody>tr:last #row_no").text("#"+rowCount);
$("#tblItems tbody>tr:last #row_no").css('font-weight','bold');
$("#tblItems tbody>tr:last :input").val("");
});
$('.removerow').click(function()
{
var id = $(this).closest('tr').attr('id')
$('table#tblItems tr#'+id).remove();
rowCount -=1;
});
</script>
In the code below, a deep clone is created of #outerDiv. After adding the clone to the DOM, a zero translate transform is applied to the clone. Now, even though the CSS property background-attachment is set to fixed, the position of the background-image in #secondInnerDiv in the clone somehow changes. Why, and more importantly, how do I prevent this from happening?
function createClone() {
const clonedDiv = document.querySelector("#outerDiv").cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.style.setProperty("transform", "translate(0, 0)");
console.log("Cloned and appended");
}#outerDiv {
position: absolute;
top: 0;
left: 0;
width: 40vw;
height: 60vh;
background-color: red;
background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
background-size: 80vw;
background-attachment: fixed;
}
#firstInnerDiv {
position: absolute;
width: 20vw;
height: 40vh;
bottom: 10vh;
right: 0;
background-color: green;
}
#secondInnerDiv {
position: absolute;
width: 10vw;
height: 40vh;
bottom: 10vh;
right: 5vw;
background-color: blue;
background-image: url("https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png");
background-size: 80vw;
background-attachment: fixed;
}<div id="outerDiv">
<input type="button" value="Clone" onclick="createClone()" />
<div id="firstInnerDiv">
</div>
<div id="secondInnerDiv">
</div>
</div>I use rollup to create multiple libs, rollup config file as below:
import terser from '@rollup/plugin-terser';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { babel } from '@rollup/plugin-babel';
import eslint from '@rollup/plugin-eslint';
const distDir = "dist/libs"
const api = {
input: "src/libs/api/index.js",
external: ["axios"],
output: [
{
file: `${distDir}/api.umd.js`,
format: "umd",
name: 'Api',
globals: {axios: 'axios'}
},
{
file: `${distDir}/api.es.js`,
format: "es"
}
],
plugins: [
terser(),
babel({babelHelpers: 'runtime', exclude: 'node_modules/**'}),
nodeResolve({
browser:true,
}),
commonjs(),
eslint({
throwOnError: true,
throwOnWarning: true,
include: ['src/**'],
exclude: ['node_modules/**']
})
]
}
const test = {
...
}
export default ()=>{
return [
api, // it contains some polyfill
test // it also contains some polyfill
]
};
My .babelrc is:
{
"presets": [
["@babel/preset-env", {
"corejs": {"version": "3", "proposals": false},
"useBuiltIns": "usage"
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime"
]
]
}
Now, api and test contain some polyfill. Is there a way to extract the used polyfills of all modules to form a single umd file but not Full Function polyfill.Thank you.
I have objects (products) in an array. Each product has its own rating and the rating is a number that comes from the database. I display the rounded average rating of each product on the product itself.
{{ Math.round(Object.values(product.rating)[0]) }}
I would like to display the average value in the stars (radio buttons) that people use to rate a product with. If I click to rate a product then the amount of stars that match the current rating should be checked. On an individual product I can just use v-model but what do I do if it’s a bunch of products in a list and each product has a different rating?
The values that I have for each radio button is the ID and the value attribute. How do I match the radio button’s id or value with the current rating of the product?
There is no ‘this’ so I tried doing this but it obviously does not work:
<div class="rating">
<input
type="radio"
value="5"
id="5"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
@change="rateproduct"
/><label for="5">☆</label>
<input
type="radio"
value="4"
id="4"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="4">☆</label>
<input
type="radio"
value="3"
id="3"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="3">☆</label>
<input
type="radio"
value="2"
id="2"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="2">☆</label>
<input
type="radio"
value="1"
id="1"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="1">☆</label>
</div>
I’m writing a function that will count the number of vowels in a string.
I decided to use a for-loop and an if-statement to do this.
function vowels (string) {
var counter = 0;
for (let i=0; i < string.length; i++) {
if (i == 'a' || i == 'e' || i == 'i' || i == 'o' || i == 'u') {
counter++;
}return counter;
}
}
This is my code. When I call the function, it only returns 0 no matter how many vowels my string has. What’s wrong?
I’m relatively new both to JavaScript and React.
I’m trying to get hold of controlled forms, both by Class and Function/Hooks.
Trying a tutorial code, I added a reset to form fields after submitting, and here is my working example.
My problem, as I said in the Title, is that I can only reset the Form if I provide empty strings for all fields:
this.setState({
email: "",
name: "",
age: "",
address: "",
phoneNo: "",
zip: "",
city: "",
state: ""
});
But before, intuitively I tough that because I had at constructor:
constructor(props){
super(props)
const initValues = {email:'',name:'', age:'', address:'',phoneNo:'',
zip:'', city:'', state:''};
this.state = {initValues}
I should be able to:
//Does not work:
this.setState( {initValues});
or:
//Still does not work:
this.setState(() => {
initValues;
});
I even tried this dumb way:
//Does not work, obvious:
this.state = { initValues };
I know that there are better ways to do Forms in React, like Formik or React-Forms, but I’m trying to get hold of older ways before move to more abstract and modern ways.
But if I have a Form with, say, 35 fields, this is insane.
What I’m missing?
TIA
Example this is my rates :
[
{price:1, time:10mins},
{price:5, time:1Hour},
{price:10, time:2:30mins},
{price:50, time:3days}
]
How to calculate the total time of the user.
For example the user inserted 125
the total time should be 6days and 6hours.
because 100=6days, 20=5hours,5=1hour based on the rate above
i have two metafields in my product.liquid page:
{{ variant.metafields.info_variant.quick_variant.value }}
and
{{ variant.metafields.info_0.quick_description.value }}
i added javascript so that the variant value displays- when the page is refreshed:
<script>
window.onload = function() {
var selects = document.querySelectorAll("select");
selects.forEach(function(select) {
select.onchange = function() {
location.reload();
}
});
};
</script>
but only this value displays:
{{ variant.metafields.info_variant.quick_variant.value }}
i am baffled as to why this is happening, any recommendations are highly appreciated. below is the full code:
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}
{% section 'product-template' %}
{% section 'product-recommendations' %}
<div class="gradient-border"></div>
<div class="product-section-02">
<img src="https://cdn.shopify.com/s/files/1/0670/9061/2498/files/border.jpg?v=1667743836" alt="gradient" class="img-left" data-aos="fade-right" data-aos-duration="2000">
<div class="container">
<div class="row">
<div class="col-md-6 valign">
{{ product.metafields.info_1.content_left.value }}
</div>
<div class="col-md-6 valign">
<div class="content-box">
{{ product.metafields.info_1.content_right.value }}
</div>
</div>
</div>
</div>
<img src="https://cdn.shopify.com/s/files/1/0670/9061/2498/files/Intersection_6.svg?v=1667743638" alt="circle" class="circle-img" data-aos="zoom-in" data-aos-duration="2000">
</div>
<div class="gradient-border"></div>
<div class="product-section-03">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 align-center">
<div class="heading-text">
{{ product.metafields.info_2.content_header.value }}
{{ product.metafields.info_2.content_description.value }}
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="container">
<div class="videos-container">
{{ product.metafields.info_2.video.value }}
{{ product.metafields.info_2.videos.value }}
{{ product.metafields.info_variant.quick_variant.value }}
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
{{ product.metafields.info_2.videos_plus.value }}
</div>
</div>
</div>
</div>
<div class="product-section-03">
<div class="container">
<div class="row">
<div class="col-md-12">
#test {{ current_variant.metafields.info_0.quick_description.value }}
</div>
</div>
</div>
</div>
<div class="gradient-border"></div>
<div class="product-section-04">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 align-center">
<div class="heading-text">
<h2>
Gallery
</h2>
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="gallery-box" data-aos="fade-up" data-aos-duration="1000">
<div class="row">
{{ product.metafields.info_3.gallery.value }}
</div>
</div>
</div>
</div>
<div class="gradient-border"></div>
<div class="product-section-05">
<div class="little-circle">
<img src="https://cdn.shopify.com/s/files/1/0670/9061/2498/files/Group_2_b8a64364-4216-4ee0-bd3d-b30e452db8ee.png?v=1667496072" alt="icon" data-aos="zoom-out" data-aos-duration="2000">
</div>
<div class="big-circle"></div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 align-center">
<div class="heading-text">
<h2>
Reviews
</h2>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<div class="product-section-06">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="product-reviews-box" data-aos="fade-in" data-aos-duration="1000">
<div class="row">
<div class="col-md-12">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div id="backToCollection"></div>
<div class="bg-border"></div>
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
};
if(sessionStorage.backToCollection) {
theme.backToCollection = {};
theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
var productCollections = {{ product.collections | json }};
var showCollection = false;
if (productCollections) {
productCollections.forEach(function(collection) {
if (collection.title === theme.backToCollection.collection.title) {
showCollection = true;
}
});
}
if(showCollection) {
var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="btn btn--secondary btn--has-icon-before">{% include 'icon-arrow-left' %}{{ 'products.product.back_to_collection' | t }} ' + theme.backToCollection.collection.title + '</a></div>';
var backToCollectionContainer = document.getElementById('backToCollection');
backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
}
}
</script>
<script>
window.onload = function() {
var selects = document.querySelectorAll("select");
selects.forEach(function(select) {
select.onchange = function() {
location.reload();
}
});
};
</script>
{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
I made an HTML page that rains using CSS for the background color and javascript for the. Now I am trying to make a chrome extension that makes it rain in the background of the google search page. However, only the background color (CSS file) is applied and I don’t see the rain. what can I do so it also shows the rain animation?
HTML:
<html>
<head>
<title>Rain animation</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<center>
<canvas id="canvas" width="2000" height ="1000"></canvas>
<script src = "main.js"></script>
</center>
</body>
</html>
JS:
var canvas = document.createElement("canvas");
canvas.style.position = "fixed";
canvas.id = "rainy-background";
document.body.appendChild(canvas);
//Global
var c, ctx, vRain;
//Rain
class Rain{
//coordinate + length + velocity
constructor(x,y,l,v){
this.x = x;
this.y = y;
this.vy = v;
this.l=l;
}
show(){
ctx.beginPath();
ctx.strokeStyle="white";
ctx.moveTo(this.x,this.y); //initial fall
ctx.lineTo(this.x, this.y+this.l); //final fall;
ctx.stroke();
}
fall(){
this.y+=this.vy;
if(this.y>c.height){
this.x = Math.floor(Math.random()*c.width)+5;
this.y = Math.floor(Math.random()*100)-100;
this.l = Math.floor(Math.random()*30)+1;
this.vy = Math.floor(Math.random()*12)+4;
}
}
}
//Loop
function loop(){
ctx.clearRect(0,0,c.width,c.height);
for(var i=0;i<vRain.length;i++){
vRain[i].show();
vRain[i].fall();
}
}
function setup(){
c = document.getElementById("canvas");
ctx = c.getContext("2d");
vRain = [];
//to make rain harder, set i higher
for(var i=0;i<250;i++){
vRain[i] = new Rain(
Math.floor(Math.random()*c.width)+5,
Math.floor(Math.random()*100)-100,
Math.floor(Math.random()*30)+1,
Math.floor(Math.random()*12)+4,
);
}
setInterval(loop,10);
}
window.onload = setup();
document.addEventListener('DOMContentLoaded',setup)
CSS:
html body{
background: linear-gradient(#361e56, rgb(150, 145, 153));
}
canvas{
width: "2000";
height: "1000";
}
JSON:
{
"manifest_version": 3,
"name": "Weather Back",
"description": "change the background of google search bar",
"version": "1.1",
"content_scripts": [{
"matches": ["https://www.google.com/"],
"css":["style.css"],
"js": ["main.js"]
}]
}
I am having this select dropdown in my HTML file:
<label for="alternativeGraph">Alternative graphs could be seen here:</label>
<select id="selGraph" onchange="graphUpdate()" aria-label="Graph">
<option value="1" selected>Graph 1 (default)</option>
<option value="2">Graph 2</option>
<option value="3">Graph 3</option>
<option value="4">Graph 4</option>
<option value="5">Graph 5</option>
</select>
My idea is that after I clicked into one of the 5 graphs, another graph would be shown. Here is my current code in JavaScript:
function render(filename) {
let filename = "";
if(filename){
fetch(filename).then(response => response.text()).then(textAsString =>
renderString(textAsString));
}
}
function graphUpdate(){
let value = this.value;
if (value == 1){
render("graph_3.gv");
} else if (value == 2){
render("graph_5.gv");
} else if (value == 3){
render("graph_6.gv");
} else if (value == 4){
render("graph_8.gv");
} else {
render("graph_9.gv");
}
}
However, when I run the website, the file (‘graph_3.gv’) would not be shown, and as I check my HTTP server, none of my GV file have been loaded for fetch API. I have looked at this example: How to get the filename from a file downloaded using Javascript Fetch API?, however I am not sure that it would work in my case.
So my question is, what can I use for my JavaScript functions to get the file name for the fetch API?
I would like to pass array values from javascript to my C#.
Currently I am getting GUID null in C#. Not sure where I am doing wrong.
When I check developer tool, I have values
http://localhost/mvc/CheckData?GUID[]=C71F952E-ED74-4138-8061-4B50B9EF6463&ColumnVal=1&RowVal=1
I would like to receive this GUID value in my C# code.
JavaScript
function CheckData(obj) {
$.ajax({
data: {GUID:eArray, ColumnVal: $('#DisColumn').val(), RowVal: $('#DisRow').val()},
url: "/mvc/CheckData",
cache: false,
success: function (result) {
....
}
});
}
C# backend code to receive values from front-end.
public ActionResult CheckData()
{
var GUID = HttpContext.Request["GUID"];
int columnVal = Convert.ToInt32(HttpContext.Request["ColumnVal"]);
int rowVal = Convert.ToInt32(HttpContext.Request["RowVal"]);
string result = (Services.CheckDataRecords(rowVal, columnVal,GUID)) ? "true" : "false";
return Content(result);
}
Currently, I am getting null when it hits to C# method var GUID = HttpContext.Request["GUID"];.
I can see array value in front-end. But it is somehow not passing that value.