# web dev

**URL:** https://forum.kirupa.com/c/programming/web-dev/42.md?page=26

[Latest](https://forum.kirupa.com/latest.md) · [Categories](https://forum.kirupa.com/categories.md)

**Page:** 27

---

## [SVG hover effect multiple paths](https://forum.kirupa.com/t/svg-hover-effect-multiple-paths/651889)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 2\
**Last updated:** [May 26, 2022, 1:01am UTC](https://forum.kirupa.com/t/svg-hover-effect-multiple-paths/651889 "2022-05-26T01:01:20Z")

</div>

Hi. I’m trying to add a hover effect on SVG icon, it does work perfectly on the icons with the unique path, I can easily change the fill color of the icon and the fill color on hover. Exemple: \<svg style="display:none;…

---

## [Adding Emojis to HTML Forms](https://forum.kirupa.com/t/adding-emojis-to-html-forms/651944)

<div class="topic-metadata">

**Author:** [@typomaniac](https://forum.kirupa.com/u/typomaniac)\
**Replies:** 8\
**Last updated:** [May 23, 2022, 12:43pm UTC](https://forum.kirupa.com/t/adding-emojis-to-html-forms/651944 "2022-05-23T12:43:02Z")

</div>

Scenario: Recently a person copy pasted an FB post into a textarea part of a form on our website and emojis were part of the original post. This resulted in some rather strange looking characters in the output. Emoji sup…

---

## [Super long lines](https://forum.kirupa.com/t/super-long-lines/651528)

<div class="topic-metadata">

**Author:** [@travis](https://forum.kirupa.com/u/travis)\
**Replies:** 7\
**Last updated:** [May 2, 2022, 5:19pm UTC](https://forum.kirupa.com/t/super-long-lines/651528 "2022-05-02T17:19:40Z")

</div>

I’m developing a website for a client, the design calls for some long vertical lines that sort of “connect” various elements (although they aren’t attached). I’m trying to think of the best way of doing this. On the su…

---

## [Make the ::after pseudo-element responsive](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 2\
**Last updated:** [March 27, 2022, 1:14pm UTC](https://forum.kirupa.com/t/make-the-after-pseudo-element-responsive/651209 "2022-03-27T13:14:58Z")

</div>

Hi. Hope you are fine. I have a question for you. I’m trying to make a pseudo-element (::after) responsive. I just want to show another picture on mobile version. But it has a very strange behaviour, which doesn’t al…

---

## [building up our react app using terminal in linux](https://forum.kirupa.com/t/building-up-our-react-app-using-terminal-in-linux/651193)

<div class="topic-metadata">

**Author:** [@shahriyar](https://forum.kirupa.com/u/shahriyar)\
**Replies:** 0\
**Last updated:** [March 18, 2022, 3:32pm UTC](https://forum.kirupa.com/t/building-up-our-react-app-using-terminal-in-linux/651193 "2022-03-18T15:32:03Z")

</div>

Hi Kirupa I just finished reading your book (Learning React , a hands on guide …). I enjoyed all of it and every thing, It was only the last page where I couldn’t build up my react app by typing “node\_modules.bin\\webpac…

---

## [MDN Redesign](https://forum.kirupa.com/t/mdn-redesign/650958)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 3\
**Last updated:** [March 6, 2022, 2:53pm UTC](https://forum.kirupa.com/t/mdn-redesign/650958 "2022-03-06T14:53:29Z")

</div>

Blog: A new year, a new MDN - Mozilla Hacks - the Web developer blog See it live: https://developer.mozilla.org/ Screenshots: Home Page JavaScript Tutorial (Prototypes) Specifications and compatibility tabl…

---

## [Make menu disappear when you click outside!](https://forum.kirupa.com/t/make-menu-disappear-when-you-click-outside/650800)

<div class="topic-metadata">

**Author:** [@rhfproject221](https://forum.kirupa.com/u/rhfproject221)\
**Replies:** 1\
**Last updated:** [February 15, 2022, 10:36pm UTC](https://forum.kirupa.com/t/make-menu-disappear-when-you-click-outside/650800 "2022-02-15T22:36:32Z")

</div>

I made this tutorial of menu but made the menu smaller and I have been trying to make it disappear when I click outside it not when I click on it and it never work. how I can do that? help, please. menu tutorial: …

---

## [I re-invent the wheel - a rant.](https://forum.kirupa.com/t/i-re-invent-the-wheel-a-rant/650356)

<div class="topic-metadata">

**Author:** [@radmo](https://forum.kirupa.com/u/radmo)\
**Replies:** 28\
**Last updated:** [February 2, 2022, 11:42pm UTC](https://forum.kirupa.com/t/i-re-invent-the-wheel-a-rant/650356 "2022-02-02T23:42:42Z")

</div>

I like to re-invent the wheel. People who say you shouldn’t, are probably employers and silly people (well, perhaps I am a bit harsh now, so forgive me). I am now 56 years old, and there seems to be an inate aversion t…

---

## [VS Code Live Server](https://forum.kirupa.com/t/vs-code-live-server/650588)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 7\
**Last updated:** [January 25, 2022, 7:45am UTC](https://forum.kirupa.com/t/vs-code-live-server/650588 "2022-01-25T07:45:27Z")

</div>

@kirupa when you are doing the regular coding video tutorials. You can install a vs code plugin called live server to not to have to refresh the html page for each file update manually.

---

## [Code not working for page 136 JavaScript Absolute Beginner's Guide 2nd Edition](https://forum.kirupa.com/t/code-not-working-for-page-136-javascript-absolute-beginners-guide-2nd-edition/650566)

<div class="topic-metadata">

**Author:** [@Sueny](https://forum.kirupa.com/u/Sueny)\
**Replies:** 3\
**Last updated:** [January 23, 2022, 10:01pm UTC](https://forum.kirupa.com/t/code-not-working-for-page-136-javascript-absolute-beginners-guide-2nd-edition/650566 "2022-01-23T22:01:50Z")

</div>

Here is code that must show warning and error messages on the console but it not working

---

## [What is a mistake i made in this code?](https://forum.kirupa.com/t/what-is-a-mistake-i-made-in-this-code/650363)

<div class="topic-metadata">

**Author:** [@Programmer\_Uz](https://forum.kirupa.com/u/Programmer_Uz)\
**Replies:** 4\
**Last updated:** [January 8, 2022, 4:57pm UTC](https://forum.kirupa.com/t/what-is-a-mistake-i-made-in-this-code/650363 "2022-01-08T16:57:12Z")

</div>

Hi Kirupa! What is a mistake i made in this code? Where is my mistake? I think, I did all correct, but I can’t see result. I want to do cards as cards in online-shops class Btn extends React.Component { ren…

---

## [Creating a 3x3 grid in CSS](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354)

<div class="topic-metadata">

**Author:** [@radmo](https://forum.kirupa.com/u/radmo)\
**Replies:** 3\
**Last updated:** [January 7, 2022, 11:14pm UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354 "2022-01-07T23:14:15Z")

</div>

Kirupa’s video is the isssue here: Creating a 3x3 Grid in CSS - YouTube Now how to access the innerHTML etc of a specific element in the grid from Javascript? That is the challenge. It seems the grid layout uses a tem…

---

## [Where is my mistake? Who could help me find it?](https://forum.kirupa.com/t/where-is-my-mistake-who-could-help-me-find-it/650214)

<div class="topic-metadata">

**Author:** [@Programmer\_Uz](https://forum.kirupa.com/u/Programmer_Uz)\
**Replies:** 4\
**Last updated:** [January 7, 2022, 10:07am UTC](https://forum.kirupa.com/t/where-is-my-mistake-who-could-help-me-find-it/650214 "2022-01-07T10:07:05Z")

</div>

\<!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\>My …

---

## [Scroll a div while background remains fixed](https://forum.kirupa.com/t/scroll-a-div-while-background-remains-fixed/650263)

<div class="topic-metadata">

**Author:** [@travis](https://forum.kirupa.com/u/travis)\
**Replies:** 0\
**Last updated:** [December 31, 2021, 3:30am UTC](https://forum.kirupa.com/t/scroll-a-div-while-background-remains-fixed/650263 "2021-12-31T03:30:14Z")

</div>

I’ve been playing around with some frontdnd development recently using Svelte and SvelteKit. I’m struggling with an effect that I know I’ve seen before but I don’t know what it’s called so it’s hard to Google it (some sp…

---

## [Fetching Country flags emojis from API in react](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062)

<div class="topic-metadata">

**Author:** [@not\_survivng](https://forum.kirupa.com/u/not_survivng)\
**Replies:** 2\
**Last updated:** [December 30, 2021, 12:18am UTC](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062 "2021-12-30T00:18:29Z")

</div>

I have a small piece of code from a weather App where it is supposed to look for any city’s weather after searching the name but also fetch the country flag of that city from this website https://www.countryflags.io but …

---

## [I am Getting a Blank Image for Unsplash API](https://forum.kirupa.com/t/i-am-getting-a-blank-image-for-unsplash-api/649821)

<div class="topic-metadata">

**Author:** [@Pragati\_Sahane](https://forum.kirupa.com/u/Pragati_Sahane)\
**Replies:** 21\
**Last updated:** [December 24, 2021, 5:53am UTC](https://forum.kirupa.com/t/i-am-getting-a-blank-image-for-unsplash-api/649821 "2021-12-24T05:53:53Z")

</div>

\<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"\> \</head\> \<style\> body { …

---

## [What was that other way to set CSS styles?](https://forum.kirupa.com/t/what-was-that-other-way-to-set-css-styles/650117)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 2\
**Last updated:** [December 21, 2021, 6:02pm UTC](https://forum.kirupa.com/t/what-was-that-other-way-to-set-css-styles/650117 "2021-12-21T18:02:22Z")

</div>

@senocular - a while ago, as part of your JS Tips of the Day, there was a clever approach for setting CSS styles on elements that you came up with. Do you remember what that is? I’m planning on revising the old tutorial …

---

## [Should I not be using app.on & invoke ?](https://forum.kirupa.com/t/should-i-not-be-using-app-on-invoke/650082)

<div class="topic-metadata">

**Author:** [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Replies:** 0\
**Last updated:** [December 19, 2021, 12:12am UTC](https://forum.kirupa.com/t/should-i-not-be-using-app-on-invoke/650082 "2021-12-19T00:12:39Z")

</div>

Hi Kirupa , I enjoyed your youtube talk on WebView . I am having trouble with a simple browser program , Trying to use electron ipc communication : in renderer.js go.addEventListener(‘click’, () =\> { ipcRenderer.i…

---

## [IF statement in Switch React JS](https://forum.kirupa.com/t/if-statement-in-switch-react-js/650019)

<div class="topic-metadata">

**Author:** [@not\_survivng](https://forum.kirupa.com/u/not_survivng)\
**Replies:** 1\
**Last updated:** [December 15, 2021, 11:06pm UTC](https://forum.kirupa.com/t/if-statement-in-switch-react-js/650019 "2021-12-15T23:06:34Z")

</div>

I’m making a snake game in React and it works fine but I have defined a switch case, where you can control the snake with the arrow keys. But there’s a problem, when the snake is going to one direction I don’t want it to…

---

## [Functional component in React](https://forum.kirupa.com/t/functional-component-in-react/649980)

<div class="topic-metadata">

**Author:** [@not\_survivng](https://forum.kirupa.com/u/not_survivng)\
**Replies:** 3\
**Last updated:** [December 12, 2021, 9:41pm UTC](https://forum.kirupa.com/t/functional-component-in-react/649980 "2021-12-12T21:41:58Z")

</div>

I’m new to react and need to learn the Functional components with Yahtzee game but all i can find with that game are class components. :") Can anyone please refactor one example of it to a functional version of Yahtzee …

---

## [Refactoring a class component to Functional, Invalid value](https://forum.kirupa.com/t/refactoring-a-class-component-to-functional-invalid-value/649866)

<div class="topic-metadata">

**Author:** [@louyi](https://forum.kirupa.com/u/louyi)\
**Replies:** 0\
**Last updated:** [December 2, 2021, 8:05pm UTC](https://forum.kirupa.com/t/refactoring-a-class-component-to-functional-invalid-value/649866 "2021-12-02T20:05:59Z")

</div>

I’m trying to refactor a Class component to Functional, but i’m pretty new to React and got myself confused with some things and got the Invalid value for prop disabled on tag. the whole code is here, may I know if …

---

## [Refactoring class component to React functional component](https://forum.kirupa.com/t/refactoring-class-component-to-react-functional-component/649442)

<div class="topic-metadata">

**Author:** [@pepasteel](https://forum.kirupa.com/u/pepasteel)\
**Replies:** 15\
**Last updated:** [November 30, 2021, 11:04pm UTC](https://forum.kirupa.com/t/refactoring-class-component-to-react-functional-component/649442 "2021-11-30T23:04:17Z")

</div>

I am a beginner in javascript and react. I’m trying to refactor the class component into a functional one (Rules for Yahtzee game scoring). This is class component: /\*\* Rule for Yahtzee scoring. \* \* This is an "abstr…

---

## [Why the complexity of React Components?](https://forum.kirupa.com/t/why-the-complexity-of-react-components/649666)

<div class="topic-metadata">

**Author:** [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Replies:** 2\
**Last updated:** [November 16, 2021, 2:08am UTC](https://forum.kirupa.com/t/why-the-complexity-of-react-components/649666 "2021-11-16T02:08:22Z")

</div>

React is quite the tool, and using it’s powers to control the DOM and build out web apps has changed a lot about web development… though… I was looking at a form component I built where I thought it might be a good idea …

---

## [Chrome DevTools: Record and playback page interactions!](https://forum.kirupa.com/t/chrome-devtools-record-and-playback-page-interactions/649513)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 2\
**Last updated:** [November 3, 2021, 10:47pm UTC](https://forum.kirupa.com/t/chrome-devtools-record-and-playback-page-interactions/649513 "2021-11-03T22:47:32Z")

</div>

https://storage.googleapis.com/web-dev-uploads/video/dPDCek3EhZgLQPGtEG3y0fTn4v82/jDJpU85zWj1dipsUPrMr.mp4

---

## [Variable produces 1111 instead of 4](https://forum.kirupa.com/t/variable-produces-1111-instead-of-4/649110)

<div class="topic-metadata">

**Author:** [@sylviaonahighway](https://forum.kirupa.com/u/sylviaonahighway)\
**Replies:** 3\
**Last updated:** [September 29, 2021, 9:08pm UTC](https://forum.kirupa.com/t/variable-produces-1111-instead-of-4/649110 "2021-09-29T21:08:19Z")

</div>

real sorry if the title sucks. So my deal here is that I’m making a cookie clicker wannabe (just to see if i can tbh) and I’m having an issue with freaking counting. So I have code that is like this. on(release){ var…

---

## [Photo Gallery](https://forum.kirupa.com/t/photo-gallery/649069)

<div class="topic-metadata">

**Author:** [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)\
**Replies:** 4\
**Last updated:** [September 27, 2021, 4:15pm UTC](https://forum.kirupa.com/t/photo-gallery/649069 "2021-09-27T16:15:30Z")

</div>

Friends, I’ve been scratching my head with the best way to handle displaying a “vast” collection of photos (in this case, real estate) into something that allows all photos to be gone through, while also not filling up t…

---

## [Code not working for me for page 43 of JavaScript Absolute Beginners Guide book](https://forum.kirupa.com/t/code-not-working-for-me-for-page-43-of-javascript-absolute-beginners-guide-book/648910)

<div class="topic-metadata">

**Author:** [@John\_B](https://forum.kirupa.com/u/John_B)\
**Replies:** 2\
**Last updated:** [September 19, 2021, 6:58am UTC](https://forum.kirupa.com/t/code-not-working-for-me-for-page-43-of-javascript-absolute-beginners-guide-book/648910 "2021-09-19T06:58:55Z")

</div>

I registered the book at Pearson and did not find any link to download the code used in the samples in the book. Is the code available elsewhere? I wrote the code on page 43 into Brackets and it did not work. Neither …

---

## [Flowchart for JavaScript's this](https://forum.kirupa.com/t/flowchart-for-javascripts-this/648768)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 7\
**Last updated:** [September 4, 2021, 2:24pm UTC](https://forum.kirupa.com/t/flowchart-for-javascripts-this/648768 "2021-09-04T14:24:46Z")

</div>

I’ve seen a few of these before but most only covered the basics. I thought I’d take a stab at it and try to make one that was a little more comprehensive. Here is the result: For the most up-to-date version, see: A…

---

## [Interaction](https://forum.kirupa.com/t/interaction/648719)

<div class="topic-metadata">

**Author:** [@Dadci\_Raouf](https://forum.kirupa.com/u/Dadci_Raouf)\
**Replies:** 2\
**Last updated:** [August 28, 2021, 6:04pm UTC](https://forum.kirupa.com/t/interaction/648719 "2021-08-28T18:04:07Z")

</div>

Hello everyone :wave: I would like to know how we can implement interaction section in our (Fetched cards, blog post) and create a list of bookmarked items like this (React):point\_down:t3:

---

## [Outputting multiple items randomly from array](https://forum.kirupa.com/t/outputting-multiple-items-randomly-from-array/648631)

<div class="topic-metadata">

**Author:** [@Dadci\_Raouf](https://forum.kirupa.com/u/Dadci_Raouf)\
**Replies:** 7\
**Last updated:** [August 28, 2021, 5:08pm UTC](https://forum.kirupa.com/t/outputting-multiple-items-randomly-from-array/648631 "2021-08-28T17:08:48Z")

</div>

Hello everyone, I was wondering how we can output multiple items randomly from an array depending on an input and button, for ex: when we put 3 in the input and click on the button we display 3 random items on the screen…

[Previous page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=25)

[Next page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=27)