We Keep Coding

Why CSS-Modules is affecting globally when working with html elements?

I have a file mycomponent.module.css
button {
width: 10vw;
min-width: 150px;
}
Unfortunately this css is affecting globally instead of the specific component where I am importing it. Does CSS modules not work on element names and only works on class-names? So .button instead of button?

Write like this.
Make a Class or ID and call them where is needed.
.bu{
width: 10vw;
min-width: 150px;
background-color:red;
}
<button class="bu">button1 </button><br><br>
<button>button2 ! </button>

If you want to style a current button, you should give a className or Id to your button. In this case it was global, for all butons.

How do I allocate a button for each seat on a seating map?

Here's the thing :
The page already has a png of the seating map of theatres, each seat layout in black lines.
what I want to do: allocate a square button to each seat, so that when u press the button it will depict a picture of the view from that particular seat.
so following questions :
what can I do to allocate a button to each seat? Do I give the buttons a corresponding grid value?
Heres a reference for u to visualise...
https://www.lgart.com/uipage/guide/seat.aspx
Its in Korean but u'll get the hang of it once u see it.
Also disclaimer: I'm a newbie at Javascript so I may be struggling with the easiest problems...

If you're trying to overlay these buttons over a PNG image, you'll probably end up needing to use some sort of image map. However, my suggestion in this case, which is a more modern way of accomplishing a task like this would be to put together an SVG version of the seating chart, where each seat shape/path in the SVG would have its own unique id. That way, you can set up an event listener in your JavaScript for any seat click and trigger any actions you'd like.
Here's a similar mini-project I built a while back to explore this concept, using the United States map. In my example below, I actually used checkbox inputs to track the checked status of any given state, but I would suggest for your case to just set up the event listener and add custom classes to your seat shapes/paths if you need any custom styling when the seat is selected.
https://cdpn.io/e/MWWLVqw
**Make sure to open this snippet as a "Full Page" to see the map
html, body { margin: 0 !important; padding: 0 !important; height: 100%; overflow: hidden; } iframe { width: 100vw; height: 100vh; }
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="brandonmcconnell" data-slug-hash="MWWLVqw" data-editable="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Interactive / Selectable Map">
<span>See the Pen <a href="https://codepen.io/brandonmcconnell/pen/MWWLVqw">
Interactive / Selectable Map</a> by Brandon McConnell (#brandonmcconnell)
on CodePen.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Change value of a class variable with one click? (simplest way)

I'm looking for a way to easily change one of variable's value. There's a chat in a browser game that I want to make taller. Changing height in dev tools does the work:
<div class="tsbchat" style="position: relative; width: 100%; height: 160px; margin-bottom: 20px;">
But can I make i.e. a script and put it in bookmarks that will allow me to change this value with one click? How would it look like? I know it's a trivial question but I'm a noob, you can remove the question and I will find help somewhere else. Thanks in advance!

The simplest solution is to type
document.getElementsByClassName('tsbchat')[0].style.height='600px'
in your console.
Remember to add [0], because getElementsByClassName returns an array

Another way is using jQuery
function handleClick(){
$(".tsbchat").css("height", "100px"); //choose the amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>
This way you can make bigger your div but only once
Use this script instead if you need to use several times:
function handleClick(){
$(".tsbchat").css("height", function(){
return $(".tsbchat").css() + 100;
});
}
Note: not sure if this way you have to specify the "px" but i'm quite sure this works

For using a javascript function as bookmark you need to use bookmarklet.You can read up more here about it Bookmarklet.
For example.
javascript:( alert(' Hello i am clicked from bookmark '));
Add this to destination of bookmark. so as soon as you click on bookmark you will see a Hello i am clicked from bookmark alert.
You can do it like this
Here handleClick is a function which will be called when you click on div.Than we select the element by class name and change it's style.
function handleClick(){
let element = document.getElementsByClassName('tsbchat');
element[0].style.height = "1000px"; //chnage to amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>

Wrapping ajax elements to HTML page

So I have already fetched data from our mongodb database using Ajax. I can retrieve the data and from database store it inside javascript variables successfully.
Firstly, What I want is to put the data back on the HTML page like inside the blocks. Should it be done using Jquery and put in CSS tags? I have the data stored in global variables inside javascript. How could this be done?
Second, after we have loads of data with text elements and the strings vary in length. So how do I make sure that whatever text I put on the HTML page is properly aligned to our canvas width and height everytime. It should not exceed the canvas width. How can this be achieved?
So this is my css element
#disp_prob_title{
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 150px;
width: 350px;
}
And this is the Javascript function where I want to append it
setQuestion : function(titleString, bodyString, hintString){
$("#disp_prob_title").append(this.qsName);
},
this.qsName is a global variable in my js file and it retrieve a string correctly on logs. However I do not see any text on my html page. Also how do I change the font size and color inside the css element?
Thanks!

Not sure what you mean by "put in CSS tags". You could do something like give the block of html you wish to have your content in an id like "content" then use jQuery add, append, appendTo, etc. method to append the content to the content block.
Html block would look like:
<div id="content"></div>
Then once you fetch the data:
$("#content").append("<div>some data here</div>");
As far as forcing the content to remain the right size etc. you'll have to add some styling to the content block or the content you append to that block.
Your question was a little vague so hopefully this helps?

It works now, I had to change the styling to
#disp_prob_title{
position: absolute;
width: 30%;
top: 250px;
left: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Thank you for your help!

How do you create a frozen/non scrolling window region using javascript?

Am curious to know how you create a frozen/non-scrolling regions on a webpage using javascript! like the one used by Stackoverflow when they alert you of the badge you have earned with a "X" close button!
Gath

You don't need to use javascript, you can do it with CSS just by setting the CSS property "display" to "fixed". You can of course do this with javascript if you like, like so:
var element = ...code to get the element you want...;
element.style.display = 'fixed';

That's using CSS's position: fixed
body {
margin-top: 20px;
}
#banner {
position: fixed;
height: 20px;
}