# web dev

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

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

**Page:** 26

---

## [I simplified @Kirupa's webcam access in browser code by about 20%](https://forum.kirupa.com/t/i-simplified-kirupas-webcam-access-in-browser-code-by-about-20/655016)

<div class="topic-metadata">

**Author:** [@yakun-hu](https://forum.kirupa.com/u/yakun-hu)\
**Replies:** 2\
**Last updated:** [November 28, 2022, 5:53am UTC](https://forum.kirupa.com/t/i-simplified-kirupas-webcam-access-in-browser-code-by-about-20/655016 "2022-11-28T05:53:45Z")

</div>

\<p\>\<video autoplay="true" id="videoElement"\>\</video\>\</p\> \<button type="button" id="start" onclick="cam\_on()"\>Cam-on\</button\> \<script\> var video = document.querySelector("#videoElement"); function cam\_on() { stream = navi…

---

## [What is this doing animation doing?](https://forum.kirupa.com/t/what-is-this-doing-animation-doing/654732)

<div class="topic-metadata">

**Author:** [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Replies:** 1\
**Last updated:** [November 23, 2022, 12:09pm UTC](https://forum.kirupa.com/t/what-is-this-doing-animation-doing/654732 "2022-11-23T12:09:20Z")

</div>

@keyframes moving { 0% { transform: translateX(500px); } 50% { transform: translateX(1000px); } 100% { transform: translate(1000px, 500px); } } I understand from and to type animations. But I don…

---

## [Whether website speed important for business website?](https://forum.kirupa.com/t/whether-website-speed-important-for-business-website/637265)

<div class="topic-metadata">

**Author:** [@Rajeshwari](https://forum.kirupa.com/u/Rajeshwari)\
**Replies:** 2\
**Last updated:** [November 4, 2022, 1:39pm UTC](https://forum.kirupa.com/t/whether-website-speed-important-for-business-website/637265 "2022-11-04T13:39:03Z")

</div>

Hi, Nowadays every business handled website to reach customers and sell their product easily. Here my question is normally website speed is one of the feature for every business, whether It’s important for any website. H…

---

## [Why your website should work without JavaScript](https://forum.kirupa.com/t/why-your-website-should-work-without-javascript/653433)

<div class="topic-metadata">

**Author:** [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Replies:** 3\
**Last updated:** [November 19, 2022, 6:08am UTC](https://forum.kirupa.com/t/why-your-website-should-work-without-javascript/653433 "2022-11-19T06:08:44Z")

</div>

https://endtimes.dev/why-your-website-should-work-without-javascript/

---

## [Hover effect is not working correctly](https://forum.kirupa.com/t/hover-effect-is-not-working-correctly/654033)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 1\
**Last updated:** [November 15, 2022, 11:35am UTC](https://forum.kirupa.com/t/hover-effect-is-not-working-correctly/654033 "2022-11-15T11:35:19Z")

</div>

Re-hello, Kirupa members :slight\_smile: Could you, please, take a look at this page If you hover over the images, you will notice that the hover effect works perfectly on “properties” images, and it has very strange b…

---

## [What happens in background-size:cover when background-image is not in proportion with element?](https://forum.kirupa.com/t/what-happens-in-background-size-cover-when-background-image-is-not-in-proportion-with-element/654559)

<div class="topic-metadata">

**Author:** [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Replies:** 1\
**Last updated:** [November 9, 2022, 6:35pm UTC](https://forum.kirupa.com/t/what-happens-in-background-size-cover-when-background-image-is-not-in-proportion-with-element/654559 "2022-11-09T18:35:12Z")

</div>

I’ve 2000 \* 2500 image. I’m learning about background-size property. Currently about cover. cover: Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its h…

---

## [How to vertically align container div element?](https://forum.kirupa.com/t/how-to-vertically-align-container-div-element/654467)

<div class="topic-metadata">

**Author:** [@forumf](https://forum.kirupa.com/u/forumf)\
**Replies:** 3\
**Last updated:** [November 7, 2022, 4:54pm UTC](https://forum.kirupa.com/t/how-to-vertically-align-container-div-element/654467 "2022-11-07T16:54:57Z")

</div>

How to vertically align container div block?

---

## [footer.p vs “footer p” selector?](https://forum.kirupa.com/t/footer-p-vs-footer-p-selector/654473)

<div class="topic-metadata">

**Author:** [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Replies:** 2\
**Last updated:** [November 7, 2022, 6:12am UTC](https://forum.kirupa.com/t/footer-p-vs-footer-p-selector/654473 "2022-11-07T06:12:10Z")

</div>

footer.p vs “footer p” selector? I’ve html code like this: \<footer\>\<p\>Copyright &copy;2027 by The Code Magazine\</p\>\</footer\> I want to select it. CSS: footer p{ font-size:16px; } But footer.p isn’t working. “f…

---

## [“Light red” and “light green” background colors not working-CSS](https://forum.kirupa.com/t/light-red-and-light-green-background-colors-not-working-css/654368)

<div class="topic-metadata">

**Author:** [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Replies:** 2\
**Last updated:** [November 2, 2022, 5:56am UTC](https://forum.kirupa.com/t/light-red-and-light-green-background-colors-not-working-css/654368 "2022-11-02T05:56:53Z")

</div>

I’m doing this assignment of The Odin Project. But the two colors aren’t working. Here’s my code: index.html: \<p class="odd"\>Number 1 - I'm a class!\</p\> \<div ids="second"\>Number 2 - I'm one ID.\</div\> \<p c…

---

## [programmatically set position of grid carousel](https://forum.kirupa.com/t/programmatically-set-position-of-grid-carousel/654066)

<div class="topic-metadata">

**Author:** [@david78737](https://forum.kirupa.com/u/david78737)\
**Replies:** 6\
**Last updated:** [October 17, 2022, 6:13pm UTC](https://forum.kirupa.com/t/programmatically-set-position-of-grid-carousel/654066 "2022-10-17T18:13:58Z")

</div>

Horizontal scrollers are becoming popular and essential on mobile devices. Kevin Powell does a nice job building one with scroll snap in CSS. He references the work of Adam Argyle who has done a lot with m…

---

## [The Falling Snow Effect](https://forum.kirupa.com/t/the-falling-snow-effect/352137)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 83\
**Last updated:** [October 16, 2022, 8:30pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137 "2022-10-16T20:30:21Z")

</div>

by kirupa | 8 July 2013 For most of my life, I grew up in parts of the world where you never really had snow. That wasn't fun. During Christmas, the images of wintery goodness you grew up expecting and the …

---

## [Playing a Randomly Generated Sound](https://forum.kirupa.com/t/playing-a-randomly-generated-sound/653883)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 0\
**Last updated:** [October 6, 2022, 5:20am UTC](https://forum.kirupa.com/t/playing-a-randomly-generated-sound/653883 "2022-10-06T05:20:17Z")

</div>

This is the companion topic to the Playing a Randomly Generated Sound coding exercise:

---

## [Dynamically Create a List](https://forum.kirupa.com/t/dynamically-create-a-list/653852)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 4\
**Last updated:** [October 5, 2022, 4:25pm UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852 "2022-10-05T16:25:25Z")

</div>

This is the companion topic to the Dynamically Create a List coding exercise:

---

## [List of apps to build as you are learning?](https://forum.kirupa.com/t/list-of-apps-to-build-as-you-are-learning/638861)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 20\
**Last updated:** [October 4, 2022, 4:50am UTC](https://forum.kirupa.com/t/list-of-apps-to-build-as-you-are-learning/638861 "2022-10-04T04:50:19Z")

</div>

One of the best ways to keep learning after mastering the basics is to actually start building small apps that get progressively more complex and larger as your skills grow. Wouldn’t it be great if we could create that l…

---

## [Konami Code in JavaScript](https://forum.kirupa.com/t/konami-code-in-javascript/640851)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 1\
**Last updated:** [September 30, 2022, 11:33pm UTC](https://forum.kirupa.com/t/konami-code-in-javascript/640851 "2022-09-30T23:33:18Z")

</div>

With Fortnite giving users a mini-game if they enter the Konami code while seeing the black hole, it seems like a good time to show this snippet that shows how to detect this code using JavaScript: \<!DOCTYPE html\> \<html\>…

---

## [Draggable Element](https://forum.kirupa.com/t/draggable-element/653163)

<div class="topic-metadata">

**Author:** [@philde](https://forum.kirupa.com/u/philde)\
**Replies:** 2\
**Last updated:** [September 7, 2022, 6:48am UTC](https://forum.kirupa.com/t/draggable-element/653163 "2022-09-07T06:48:22Z")

</div>

Hey guys, I found the following tutorial: Create a Draggable Element in JavaScript | KIRUPA Is it possible to drag the circle and use left and top position in percent (%)? In this tutorial the circle use the transform …

---

## [Eslint Gurus?](https://forum.kirupa.com/t/eslint-gurus/648872)

<div class="topic-metadata">

**Author:** [@travis](https://forum.kirupa.com/u/travis)\
**Replies:** 5\
**Last updated:** [September 15, 2021, 12:53pm UTC](https://forum.kirupa.com/t/eslint-gurus/648872 "2021-09-15T12:53:58Z")

</div>

I’m having an issue with my eslint setup. Specifically it seems to be fixing things that it is not configured to fix, it’s like doing a full replace of all semi-colons and single quotes. I have co-workers who run the sa…

---

## [Close modal on the outside click](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 8\
**Last updated:** [August 22, 2022, 8:13am UTC](https://forum.kirupa.com/t/close-modal-on-the-outside-click/652894 "2022-08-22T08:13:49Z")

</div>

Hello, Kirupa members. I need your help. I have 2 modals on my site ( https://coursuit.netlify.app/ ) You can find them on the right side of the header - “Login modal” (press “Login” button) and “Normal modal” (press “…

---

## [Need some clarification from the react course todo list!](https://forum.kirupa.com/t/need-some-clarification-from-the-react-course-todo-list/653073)

<div class="topic-metadata">

**Author:** [@tbunreal](https://forum.kirupa.com/u/tbunreal)\
**Replies:** 2\
**Last updated:** [August 13, 2022, 3:45pm UTC](https://forum.kirupa.com/t/need-some-clarification-from-the-react-course-todo-list/653073 "2022-08-13T15:45:15Z")

</div>

Hi, I must admit I don’t know much javascript, but I seem to be doing ok with the react course. But I am having some trouble understanding this code from the todo list project. Here The code is: var filteredItems = th…

---

## [Prevent grid item from vertical stretching](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 2\
**Last updated:** [August 3, 2022, 10:12pm UTC](https://forum.kirupa.com/t/prevent-grid-item-from-vertical-stretching/652920 "2022-08-03T22:12:14Z")

</div>

Hi, Kirupa members, I need your help. Tried so many scenarios, nothing seems working. On this website https://fashionista-kirupa.netlify.app/ I have a lot of asymmetrical cards, which CSS makes symmetrical …

---

## [Perl vs PHP Encryption](https://forum.kirupa.com/t/perl-vs-php-encryption/652891)

<div class="topic-metadata">

**Author:** [@typomaniac](https://forum.kirupa.com/u/typomaniac)\
**Replies:** 1\
**Last updated:** [July 31, 2022, 4:55pm UTC](https://forum.kirupa.com/t/perl-vs-php-encryption/652891 "2022-07-31T16:55:05Z")

</div>

To begin with, I’m an amateur at “scripting” and far from the best but I’m finding Perl a bit easier for what I’m about to do as to PHP. I have an admin section on our website that I’m planning on re-writing in Perl–is …

---

## [React - todolist - deleting](https://forum.kirupa.com/t/react-todolist-deleting/652700)

<div class="topic-metadata">

**Author:** [@Seaqueue](https://forum.kirupa.com/u/Seaqueue)\
**Replies:** 3\
**Last updated:** [July 21, 2022, 4:55pm UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700 "2022-07-21T16:55:05Z")

</div>

The onClick is listened by the delete function in TodoItems which is referred in TodoList’s with the “delete” prop that initialized with a delete function in TodoList. The actual filtering happens in TodoList, but the e…

---

## [Class Method Problem](https://forum.kirupa.com/t/class-method-problem/652466)

<div class="topic-metadata">

**Author:** [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Replies:** 6\
**Last updated:** [July 1, 2022, 6:33am UTC](https://forum.kirupa.com/t/class-method-problem/652466 "2022-07-01T06:33:39Z")

</div>

Hello all - the bootcamp class registerStudent() method is not behaving as i expect. In this method, i am checking if the studentToRegister argument contains both a name and email , if so, i want to push the argument int…

---

## [JS not.](https://forum.kirupa.com/t/js-not/652232)

<div class="topic-metadata">

**Author:** [@forumf](https://forum.kirupa.com/u/forumf)\
**Replies:** 6\
**Last updated:** [June 25, 2022, 6:15pm UTC](https://forum.kirupa.com/t/js-not/652232 "2022-06-25T18:15:07Z")

</div>

Doesn’t send query to SQL database favicon.ico:1 GET http://wed-dns/favicon.ico 404 (Not Found)

---

## [Why does it work?](https://forum.kirupa.com/t/why-does-it-work/652382)

<div class="topic-metadata">

**Author:** [@slyuqi](https://forum.kirupa.com/u/slyuqi)\
**Replies:** 1\
**Last updated:** [June 24, 2022, 8:07pm UTC](https://forum.kirupa.com/t/why-does-it-work/652382 "2022-06-24T20:07:13Z")

</div>

let myButton = document.querySelector('#myButton'); myButton.addEventListener("click", doSomething, false); function doSomething(e) { alert('is this working?'); } Why the code works even if the “doSomething” functi…

---

## [In Chapter 7 react state this.strikes is undefined](https://forum.kirupa.com/t/in-chapter-7-react-state-this-strikes-is-undefined/652365)

<div class="topic-metadata">

**Author:** [@daniil.ustimencko](https://forum.kirupa.com/u/daniil.ustimencko)\
**Replies:** 2\
**Last updated:** [June 24, 2022, 3:03pm UTC](https://forum.kirupa.com/t/in-chapter-7-react-state-this-strikes-is-undefined/652365 "2022-06-24T15:03:46Z")

</div>

When I run the following code from chapter 7 class LightningCounter extends React.Component { constructor(props) { super(props); this.state = { strikes: 0, }; }…

---

## [How to add same script on multiple elements with same classes](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987)

<div class="topic-metadata">

**Author:** [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Replies:** 4\
**Last updated:** [June 15, 2022, 2:21am UTC](https://forum.kirupa.com/t/how-to-add-same-script-on-multiple-elements-with-same-classes/651987 "2022-06-15T02:21:06Z")

</div>

Hi, Kirupa members. I need your help. :slightly\_smiling\_face: Desperately tried many times and different combinations. Nothing works. I need to display the modal, when user click on “Inquire” and on the “Let’s talk” bu…

---

## [Handling events for many elements tutorial: is this always the best approach?](https://forum.kirupa.com/t/handling-events-for-many-elements-tutorial-is-this-always-the-best-approach/652188)

<div class="topic-metadata">

**Author:** [@Daave](https://forum.kirupa.com/u/Daave)\
**Replies:** 4\
**Last updated:** [June 11, 2022, 3:43pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements-tutorial-is-this-always-the-best-approach/652188 "2022-06-11T15:43:16Z")

</div>

I would like to share my thoughts (and very little experience), as a junior web developer, on Kirupa’s very interesting tutorial “Handling events for many elements”. I tried using it in a project I am currently working o…

---

## [Selecting DOM Elements](https://forum.kirupa.com/t/selecting-dom-elements/651806)

<div class="topic-metadata">

**Author:** [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Replies:** 26\
**Last updated:** [June 6, 2022, 11:18pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806 "2022-06-06T23:18:58Z")

</div>

Hello, I’m having trouble solving the problem of selecting a particular dom element and looping through which ever element is clicked with events because said element(s) do not initially exist. I have a button the adds …

---

## [Handling Events for Multiple Elements](https://forum.kirupa.com/t/handling-events-for-multiple-elements/651893)

<div class="topic-metadata">

**Author:** [@david78737](https://forum.kirupa.com/u/david78737)\
**Replies:** 15\
**Last updated:** [June 4, 2022, 6:08pm UTC](https://forum.kirupa.com/t/handling-events-for-multiple-elements/651893 "2022-06-04T18:08:37Z")

</div>

Okay we have a very useful video on this. Thank you. I want to use this video as a foundational form for a “like” / “unlike” button icon. This would allow a user client to create a list of favorited items to look at i…

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

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