Skip to content

Commit

Permalink
I have added the robot.tx file in my root directory
Browse files Browse the repository at this point in the history
  • Loading branch information
@massarinoaa
massarinoaa committed Aug 10, 2024
1 parent 6f9398c commit 5a1c4e2
Show file tree
Hide file tree
Showing 10 changed files with 763 additions and 59 deletions.
116 changes: 116 additions & 0 deletions public/robots.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta
name="description"
content="Unlock your coding potential with Merge Society's interactive tutorials, exercises, and resources. Learn HTML, CSS, JavaScript, Python, and more, and become a proficient developer in no time!"
/>
<title>Learn to Code with Merge Society</title>
<meta name="p:domain_verify" content="ead9ce0acd388ef15d8dce7ea6918d60" />
<meta name="twitter:card" content="summary" />
<meta
name="twitter:title"
content="Merge Society - Learn to Code with Interactive Tutorials"
/>
<meta
name="twitter:description"
content="Unlock your coding potential with Merge Society's interactive tutorials, exercises, and resources. Learn HTML, CSS, JavaScript, Python, and more, and become a proficient developer in no time!"
/>
<meta
name="twitter:image"
content="https://res.cloudinary.com/dhgjhspsp/image/upload/v1712405443/HTML5_Badge_512_njlsbs.png"
/>
<meta
property="og:title"
content="Merge Society - Learn to Code with Interactive Tutorials"
/>
<meta
property="og:description"
content="Unlock your coding potential with Merge Society's interactive tutorials, exercises, and resources. Learn HTML, CSS, JavaScript, Python, and more, and become a proficient developer in no time!"
/>
<meta
property="og:image"
content="https://res.cloudinary.com/dhgjhspsp/image/upload/v1712405443/HTML5_Badge_512_njlsbs.png"
/>
<meta
name="Keywords"
content="HTML, CSS, JavaScript, Programming Tutorials, Web Development, Coding Exercises, Learn to Code, Interactive Tutorials, Python, React"
/>
<link
rel="shortcut icon"
href="https://res.cloudinary.com/dhgjhspsp/image/upload/v1712405443/HTML5_Badge_512_njlsbs.png"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>

<!-- Canonical URL -->
<link rel="canonical" href="https://www.mergesociety.com/" />

<!-- Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-EVC3DTG6XZ"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-EVC3DTG6XZ");
</script>

<!-- Google AdSense -->
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6271278895910760"
crossorigin="anonymous"
></script>

<!-- Clicky Analytics -->
<script async data-id="101458649" src="//static.getclicky.com/js"></script>

<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.mergesociety.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Tutorials",
"item": "https://www.mergesociety.com/tutorials"
}
]
}
</script>
<script type="module" crossorigin src="/assets/index-BaLUyckN.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D8WiLJYm.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
25 changes: 25 additions & 0 deletions src/Article.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.article {
margin: 35px 35px auto;
text-align: justify;
line-height: 25px;
}
h1,
h3,
p {
margin-top: 20px;
}
@media (max-width: 600px) {
.article {
margin: 15px 15px auto;
line-height: 25px;
}
h1 {
font-size: 1.2em;
}
p {
font-size: 1em;
}
h3 {
font-size: 1em;
}
}
137 changes: 79 additions & 58 deletions src/Javascript/BOM.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1133,89 +1133,110 @@ export const BOMApplication = () => {
return (
<div className="comments-container internet">
<AdUnit />
<h1>BOM Applications (uer interaction beyond the page content)</h1>
<h1>BOM Applications: Interactive Web Experiences</h1>
<p>
Absolutely! Now that{" "}
{`we've explored the individual functionalities of
the Browser Object Model (BOM), let's`}{" "}
delve into how they can be creatively combined to create interactive web
experiences that surpass static content. Here are some captivating ways
to leverage the BOM: pen_spark
Now that we’ve learned about different objects in the Browser Object
Model (BOM), let’s explore how we can use these objects to make our web
pages more interactive and responsive. The BOM allows us to create
dynamic content that responds to user actions and adapts to different
devices. Let’s dive into some practical examples.
</p>

<h2>1. Using BOM for Dynamic Content</h2>
<p>
One of the key benefits of the BOM is that it lets us make our web pages
respond to what users do. Here are a few ways we can use BOM objects to
achieve this:
</p>
<h2>1. Dynamic Content based on User Interaction: pen_spark</h2>
<ul>
<li>
{" "}
<b>Location Object</b>: Imagine a product page. Upon adding an item to
the cart, you can use the property to dynamically update the URL with
the chosen product ID. This allows users to easily share the specific
product {`they're`} interested in with others. pen_spark
<b>Changing the URL with the Location Object:</b> Imagine you have an
online store. When a user selects a product, you can use the{" "}
<code>location.href</code> property to update the URL to something
like <code>https://mystore.com/product?id=123</code>. This not only
helps with sharing links but also allows you to track which product
the user is viewing without refreshing the page.
</li>
<li>
<b>Window Object</b>: Combine <code>confirm()</code> with other
functionalities to create interactive quizzes or surveys. For
instance, after a question, use <code>confirm()</code> to present
answer choices and store user input using variables. The{" "}
<code> alert()</code> method can then be used to display feedback
based on the chosen answer. pen_spark
<b>Creating Confirmations with the Window Object:</b> Let’s say you
want to confirm an action, like deleting an item from a list. You can
use the <code>confirm()</code> method to ask the user, “Are you sure
you want to delete this item?” If the user clicks "OK," you can
proceed with the action; if they click "Cancel," you stop the action.
This adds an extra layer of interaction to your web page.
</li>
<li>
<b>History Object</b>: This object is particularly useful for
multi-step forms. You can use <code>history.pushState()</code> to
create a new history entry for each form step, preventing users from
accidentally navigating away before completing the entire process.
pen_spark
<b>Handling Navigation with the History Object:</b> If your web page
has multiple steps, like a sign-up form with several sections, you can
use <code>history.pushState()</code> to keep track of each step. This
way, if the user clicks "Back," they return to the previous section
without losing their progress.
</li>
</ul>
<h3> 2. Responsive Design and User Experience: pen_spark</h3>

<h2>2. Making Web Pages Responsive</h2>
<p>
With more people accessing websites from various devices like
smartphones, tablets, and desktop computers, it’s crucial to make sure
your site looks good and works well on all of them. The BOM provides
tools to help with this:
</p>
<ul>
<li>
{" "}
<b> Screen Object</b>: As discussed earlier, the <code>width</code>{" "}
and <code>height</code> properties of the Screen Object are essential
for crafting responsive web designs. By detecting screen sizes, you
can adjust layouts, font sizes, and image scaling to ensure optimal
viewing across desktops, tablets, and mobile devices. pen_spark
<b>Adjusting Layouts with the Screen Object:</b> The{" "}
<code>screen</code> object helps you get information about the user’s
screen, such as its width and height. You can use this data to adjust
your web page layout, making sure it’s easy to use whether someone is
viewing it on a large monitor or a small phone screen. For instance,
you might choose to display larger images on a desktop and smaller,
more compressed images on a mobile device.
</li>
<li>
<b> Window Object</b>: The <code>innerWidth</code> and{" "}
<code>innerHeight</code>
properties can be used to adapt content placement based on the
available viewport size. For instance, you can conditionally display
certain elements or adjust their positioning for a better user
experience on smaller screens. pen_spark
<b>Optimizing Content Placement with the Window Object:</b> The{" "}
<code>window.innerWidth</code> and <code>window.innerHeight</code>{" "}
properties give you the size of the user’s browser window. If the
window is small, you can hide certain elements or rearrange content to
fit better, improving the user experience.
</li>
</ul>
<AdUnit />
<h3>3. Real-time Updates and User Engagement: pen_spark</h3>

<h2>3. Enhancing User Interaction with Real-Time Updates</h2>
<p>
Real-time updates make web pages feel more dynamic and modern by
allowing content to change without needing to reload the page. Here’s
how BOM objects can help:
</p>
<ul>
<li>
<b>Location Object</b>: Imagine a weather app. By continuously
monitoring the <code>location.href</code> using JavaScript, you can
detect if the user navigates to a different city page and
automatically update the weather information displayed. pen_spark
<b>Auto-Updating Content with the Location Object:</b> For example, if
you have a news website, you can use the <code>location</code> object
to automatically update the displayed news articles when the user
navigates to a different section of the site. This keeps the content
fresh and relevant without requiring the user to manually refresh the
page.
</li>
<li>
<b>Navigation and History Objects</b>: Social media platforms leverage
these objects to manage user navigation and content updates. For
example, when a user clicks on a new post, the History Object can be
used to keep track of their browsing path within the platform. This
allows them to use the back button to revisit previous posts without
completely refreshing the entire page. pen_spark
<b>Managing Browsing History with the History Object:</b> Social media
platforms often use the History Object to enhance navigation. If
you’re scrolling through posts and click on one to view it in detail,
the platform can use <code>history.pushState()</code> to save your
current position. This allows you to return to where you left off
without reloading the entire page.
</li>
</ul>

<p>
{" "}
These are just a few examples, and the possibilities are truly endless!
By understanding and combining the functionalities offered by the BOM,
you can create dynamic and engaging web experiences that cater to user
interaction, adapt to different devices, and provide a richer browsing
experience overall. pen_spark
The Browser Object Model is more than just a collection of objects—it’s
a powerful tool that lets you create dynamic, responsive, and engaging
web experiences. By using the BOM effectively, you can make your web
pages do more than just display content—they can interact with users,
respond to different devices, and keep content up-to-date in real-time.
</p>
<p>
As you continue your web development journey, remember to experiment and
explore! {`There's`} a vast world of interactive possibilities waiting
to be unlocked using the power of the BOM. pen_spark
As you continue building your web development skills, remember to
experiment with these BOM features. The more you practice, the more
you’ll discover how to create rich, interactive experiences that your
users will love.
</p>
<div className="button-container">
<button onClick={() => (window.location.href = "/screenObject")}>
Expand Down
2 changes: 1 addition & 1 deletion src/Jscourse.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const Jscourse = () => {
Screen Object (screen size and resolution)
</li>
<li onClick={() => navigate("/BOMApplication")}>
BOM Applications (uer interaction beyond the page content)
BOM Applications (user interaction beyond the page content)
</li>
</ul>
<h2>JavaScript vs. ECMAScript:Whats the difference? </h2>
Expand Down
13 changes: 13 additions & 0 deletions src/Policy.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Link, useNavigate } from "react-router-dom";

// import './Article.css'
// import Article1 from "./Tempariticle/Article1";
// import Article2 from "./Tempariticle/Article2";
// import Article3 from "./Tempariticle/Article3";
// import Article4 from "./Tempariticle/Article4";
// import Article5 from "./Tempariticle/Article5";

const Policies = () => {
const navigate = useNavigate();
return (
Expand Down Expand Up @@ -118,6 +126,11 @@ const Policies = () => {
</a>
.
</p>
{/* <Article1 />
<Article2 />
<Article3 />
<Article4 />
<Article5 /> */}
<div className="button-container">
<button onClick={() => navigate(-1)}>Back</button>
</div>
Expand Down
Loading

0 comments on commit 5a1c4e2

Please sign in to comment.