Skip to content

Latest commit

 

History

History
437 lines (362 loc) · 15.8 KB

documentation.md

File metadata and controls

437 lines (362 loc) · 15.8 KB

Code Snippet Viewer Documentation

HTML Structure

The HTML file index.html contains the structure of the web page. Here's a detailed breakdown of the main elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Topic's Name - Codes</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
</head>
  1. The <!DOCTYPE html> declaration specifies the HTML version.
  2. The <html> element with the lang="en" attribute sets the language of the page to English.
  3. The <head> element contains metadata about the page, such as character encoding and viewport settings.
  4. The <title> element sets the title of the web page, which appears in the browser's title bar or tab.
  5. The <link> elements include the CSS file styles.css and the highlight.js library for syntax highlighting.
<body>
  <header>
    <h1>Topic's Name</h1>
  </header>
  1. The <body> element contains the visible content of the web page.
  2. The <header> element holds the main heading of the page, which is displayed at the top.
  <div class="container">
    <div class="language-buttons">
      <button class="lang-btn active" onclick="showCode('c')">C</button>
      <button class="lang-btn" onclick="showCode('cpp')">C++</button>
      <button class="lang-btn" onclick="showCode('csharp')">C#</button>
      <button class="lang-btn" onclick="showCode('java')">Java</button>
      <button class="lang-btn" onclick="showCode('python')">Python</button>
      <button class="lang-btn" onclick="showCode('javascript')">JavaScript</button>
    </div>
  1. The <div> with the class container holds the main content of the page.
  2. Inside the container, there is a <div> with the class language-buttons that holds the language selection buttons.
  3. Each language button is a <button> element with the class lang-btn and an onclick attribute that calls the showCode() function with the corresponding language as an argument.
  4. The active class is initially applied to the C language button to indicate that it is the default selection.
    <div class="code-container" id="codeContainer">
      <div class="code-block-selector" id="code-block-selector" style="display: none;">
        <button class="code-btn active" onclick="showCodeBlock(0)">Approach 1</button>
        <button class="code-btn" onclick="showCodeBlock(1)">Approach 2</button>
        <button class="code-btn" onclick="showCodeBlock(2)">Approach 3</button>
      </div>
  1. The <div> with the class code-container holds the code snippet and the "Approach" buttons.
  2. Inside the code container, there is a <div> with the class code-block-selector and id="code-block-selector" that holds the "Approach" buttons.
  3. The style="display: none;" attribute initially hides the code block selector.
  4. Each "Approach" button is a <button> element with the class code-btn and an onclick attribute that calls the showCodeBlock() function with the corresponding index as an argument.
  5. The active class is initially applied to the first "Approach" button.
      <pre><code class="language-c" id="code-block-0"></code></pre>
      <pre><code class="language-c" id="code-block-1" style="display: none;"></code></pre>
      <pre><code class="language-c" id="code-block-2" style="display: none;"></code></pre>
  1. The <pre><code> elements hold the actual code snippets for each approach.
  2. The class="language-c" attribute specifies the language for syntax highlighting.
  3. The id attributes uniquely identify each code block.
  4. The style="display: none;" attribute initially hides the second and third code blocks.
      <button class="copy-btn" onclick="copyCode()">Copy</button>
    </div>
  </div>
  1. The <button> element with the class copy-btn and onclick="copyCode()" allows users to copy the selected code snippet.
  2. The code container and language buttons are wrapped inside the main container <div>.
  <footer>
    <p>&copy; 2024 Data structures and algorithms All rights reserved.</p>
  </footer>
  1. The <footer> element displays the copyright information at the bottom of the page.
  <script src="script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      showCode('c');
    });
  </script>
</body>
</html>
  1. The <script> elements include the JavaScript file script.js and the highlight.js library.
  2. The JavaScript code block at the end of the <body> element listens for the DOMContentLoaded event, which fires when the initial HTML document has been completely loaded and parsed.
  3. When the DOMContentLoaded event occurs, the showCode('c') function is called to display the C language code snippet and the first approach by default.

CSS Styling

The CSS file styles.css defines the visual appearance of the web page. Here's a detailed breakdown of the main styles:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: #ffffff;
}
  1. The body styles set the font family, remove default margins and padding, and define the background and text colors.
header {
  background-color: #1e1e1e;
  color: #ffffff;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
  1. The header styles set the background color, text color, padding, and center the text.
  2. A box shadow is added to create a subtle depth effect.
  3. Margin-bottom is used to separate the header from the main content.
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
  1. The .container class centers the content horizontally and sets a maximum width of 800 pixels.
.language-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.lang-btn {
  background-color: #1e90ff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.lang-btn:hover,
.lang-btn.active {
  background-color: #1473c7;
}
  1. The .language-buttons class styles the language selection buttons container, centering the buttons horizontally and adding some spacing between them.
  2. The .lang-btn class styles the individual language buttons, including the background color, text color, border, border radius, padding, font size, cursor, and a hover transition effect.
  3. The :hover and .active pseudo-classes change the background color on hover and when a button is active, respectively.
.code-container {
  background-color: #282c34;
  color: #abb2bf;
  font-size: large;
  border-radius: 5px;
  overflow: auto;
  margin-bottom: 20px;
  position: relative;
}

.code-container pre {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
  1. The .code-container class styles the code snippet container, including the background color, text color, font size, border radius, and margin-bottom.
  2. The overflow: auto property adds scrollbars if the content exceeds the container's dimensions.
  3. The position: relative property is used for positioning the "Copy" button inside the container.
  4. The nested pre elements inside the code container have no margin, use a monospace font, preserve whitespace, and wrap long lines.
.code-block-selector {
  background-color: #121212;
  padding: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.code-btn {
  background-color: #1e90ff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.code-btn:hover,
.code-btn.active {
  background-color: #1473c7;
}
  1. The .code-block-selector class styles the "Approach" buttons container, including the background color, padding, and rounded corners at the top.
  2. The .code-btn class styles the individual "Approach" buttons, similar to the language buttons, with a different background color.
  3. The :hover and .active pseudo-classes change the background color on hover and when a button is active, respectively.
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #1e90ff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.copy-btn:hover {
  background-color: #1473c7;
}
  1. The .copy-btn class styles the "Copy" button, positioning it at the top-right corner of the code container using position: absolute.
  2. The button has the same styles as the language and "Approach" buttons, with a hover transition effect.
.hljs {
  background-color: #121212 !important;
}
  1. The .hljs class overrides the highlight.js default background color to match the code container's background.
footer {
  background-color: #1e1e1e;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

footer p {
  margin: 0;
}
  1. The footer styles set the background color, text color, center the text, add padding, and position the footer at the bottom of the page using position: fixed.
  2. The width: 100% property ensures that the footer spans the entire width of the page.
  3. The nested p element inside the footer has no margin.

JavaScript Functionality

The JavaScript file script.js contains the logic to handle user interactions and update the displayed code snippets. Here's a detailed breakdown of the main functions:

const codes = {
  c: [
    `#include <stdio.h>

int main() {
  // C code for array
  return 0;
}`,
    `#include <stdio.h>

int main() {
  // C code for array - Approach 2
  return 0;
}`,
    `#include <stdio.h>

int main() {
  // C code for array - Approach 3
  return 0;
}`
  ],
  // ...
};
  1. The codes object holds the code snippets for each programming language and approach.
  2. Each language is a key in the object, and its value is an array of code snippets.
  3. In this example, the C language has three code snippets, representing different approaches.
function showCode(language) {
  const codeBlocks = document.querySelectorAll('.code-container pre code');
  const langBtns = document.querySelectorAll('.lang-btn');
  const codeBtns = document.querySelectorAll('.code-btn');
  const codeBlockSelector = document.getElementById('code-block-selector');

  codeBlocks.forEach((block, i) => {
    block.textContent = codes[language][i] || codes[language][0];
    block.className = `language-${language}`;
    block.style.display = 'none';
  });

  codeBlocks[0].style.display = 'block';
  1. The showCode() function is called when a language button is clicked.
  2. It selects all the code blocks, language buttons, "Approach" buttons, and the code block selector.
  3. It loops through the code blocks, setting their text content to the corresponding code snippet for the selected language.
  4. If multiple approaches are available, it uses the index i to select the appropriate code snippet.
  5. The className property is set to language-${language} for syntax highlighting.
  6. The style.display property is set to 'none' for all code blocks to hide them initially.
  7. Finally, the first code block is shown by setting its style.display to 'block'.
  langBtns.forEach(btn => {
    btn.classList.remove('active');
  });

  const activeBtn = document.querySelector(`.lang-btn[onclick="showCode('${language}')"]`);
  activeBtn.classList.add('active');

  codeBtns.forEach((btn, i) => {
    btn.style.display = i < codes[language].length ? 'inline-block' : 'none';
  });

  codeBlockSelector.style.display = codes[language].length > 1 ? 'block' : 'none';
  hljs.highlightAll();
}
  1. The function then removes the active class from all language buttons.
  2. It selects the active language button using a CSS selector and adds the active class to it.
  3. It loops through the "Approach" buttons and sets their style.display property based on the number of available approaches for the selected language.
  4. If there is only one approach, the "Approach" buttons are hidden.
  5. The code block selector's style.display property is set to 'block' if there are multiple approaches, or 'none' if there is only one approach.
  6. Finally, the hljs.highlightAll() function is called to highlight the code snippets.
function showCodeBlock(index) {
  const codeBlocks = document.querySelectorAll('.code-container pre code');
  const codeBtns = document.querySelectorAll('.code-btn');

  codeBlocks.forEach((block, i) => {
    block.style.display = i === index ? 'block' : 'none';
  });

  codeBtns.forEach((btn, i) => {
    btn.classList.toggle('active', i === index);
  });

  hljs.highlightAll();
}

17. The `showCodeBlock()` function is called when an "Approach" button is clicked.
18. It selects all the code blocks and "Approach" buttons.
19. It loops through the code blocks and sets their `style.display` property to `'block'` if the index matches the selected index, or `'none'` otherwise, effectively showing the selected code block and hiding the others.

```javascript
  codeBtns.forEach((btn, i) => {
    btn.classList.toggle('active', i === index);
  });

  hljs.highlightAll();
}
  1. It loops through the "Approach" buttons and toggles the active class based on the selected index, highlighting the active button.
  2. Finally, it calls hljs.highlightAll() to re-highlight the code snippets after the display has been updated.
function copyCode() {
  const codeBlock = document.querySelector('.code-container pre code:not([style*="none"])');
  const tempInput = document.createElement('textarea');
  tempInput.value = codeBlock.textContent;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand('copy');
  document.body.removeChild(tempInput);
  alert('Code copied to clipboard!');
}
  1. The copyCode() function is called when the "Copy" button is clicked.
  2. It selects the visible code block using the CSS selector .code-container pre code:not([style*="none"]), which finds the <code> element that is not hidden by the style="display: none;" attribute.
  3. It creates a temporary <textarea> element and sets its value to the text content of the selected code block.
  4. The <textarea> is appended to the <body>, selected, and copied to the clipboard using the document.execCommand('copy') method.
  5. After copying, the <textarea> is removed from the <body>.
  6. Finally, an alert is displayed to inform the user that the code has been copied to the clipboard.
function getCurrentLanguage() {
  const activeBtn = document.querySelector('.lang-btn.active');
  return activeBtn.getAttribute('onclick').replace("showCode('", "").replace("')", "");
}
  1. The getCurrentLanguage() function is a helper function that retrieves the currently selected language.
  2. It selects the active language button using the CSS selector .lang-btn.active.
  3. It then extracts the language from the onclick attribute of the active button by removing the showCode(' prefix and ) suffix.
document.addEventListener('DOMContentLoaded', () => {
  showCode('c');
});
  1. Finally, the JavaScript code block at the end of the <body> element listens for the DOMContentLoaded event, which fires when the initial HTML document has been completely loaded and parsed.
  2. When the DOMContentLoaded event occurs, the showCode('c') function is called to display the C language code snippet and the first approach by default.